# Customize

By default, the Article Editor will work out of the box with some default settings and plugins. It is easy to create custom configurations.

# Custom Article Editor configuration

When the plugin is installed, it did create a new directory article within your config directory in the root of your project. Inside this folder there are multiple JSON files with some preselected configurations. You can add new JSON files into this directory, or edit existing ones. Take in mind that changing existing files will change the config for all existing fields referencing that config.

# Default Config

In this example we will dive into the Bootstrap-Default.json file to see what happens there. This file will extend the Article Editor to work with Bootstrap 4 (opens new window).

{
  "custom": {
    "css": [
      "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    ]
  },
  "plugins": [
    "craft-image",
    "craft-image-editor",
    "craft-link",
    "imageposition",
    "reorder",
    "underline",
    "removeformat",
    "selector"
  ],
  "grid": {
    "classname": "row",
    "columns": 12,
    "gutter": "1px",
    "offset": {
      "left": "15px",
      "right": "15px"
    },
    "patterns": {
      "6|6": "col-6|col-6",
      "4|4|4": "col-4|col-4|col-4",
      "3|3|3|3": "col-3|col-3|col-3|col-3",
      "2|2|2|2|2|2": "col-2|col-2|col-2|col-2|col-2|col-2",
      "3|6|3": "col-3|col-6|col-3",
      "2|8|2": "col-2|col-8|col-2",
      "5|7": "col-5|col-7",
      "7|5": "col-7|col-5",
      "4|8": "col-4|col-8",
      "8|4": "col-8|col-4",
      "3|9": "col-3|col-9",
      "9|3": "col-9|col-3",
      "2|10": "col-2|col-10",
      "10|2": "col-10|col-2",
      "12": "col-12"
    }
  },
  "addbarAdd": [
    "card"
  ],
  "classes": {
    "img": "img-fluid",
    "table": "table table-bordered"
  },
  "embed": {
    "responsive": "embed-responsive embed-responsive-16by9"
  }
}

The contents of this file are in the exact same format as the Article Editor settings options (opens new window). By default, all JSON files created in the config directory will enable the plugins craft-image, craft-image-editor and craft-link. It is up to you if you need them, but if you want to create links to internal pages, upload assets within CraftCMS and edit assets, those are mandatory.

# Plugins

When using our CDN, all default Article Editor plugins are available. You can enable them via the "plugins" array in the JSON file. See below.

# Enabling Custom Plugin(s)

Since our plugin let you take control of the config, it is possible to add (or remove) plugins for Article Editor. You can do that by adding them into the

{
    "plugins": []
}

section of the config JSON.

# Example

Let's say we created our own Article Editor plugin (opens new window) called Hello World.

We can create a new config JSON (or edit an existing one), with the following JSON:

{
  "plugins": [
    "craft-image",
    "craft-image-editor",
    "craft-link",
    "hello-world"
  ]
}

Our Craft Article plugin will search for the hello-world plugin at the following directory:

web/article/hello-world.js.

If this file does not exist, it will look for it at the CDN (if set to your own CDN):

https://my-own-cdn.com/article/plugins/hello-world/hello-world.min.js.

# Changing CSS

Whenever you would like to use your own CSS framework or load for example Tailwind, you need to tell the Article Editor to use that CSS. You can do this in the JSON config file by adding:

{
  "custom": {
    "css": [
      "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.4/tailwind.min.css"
    ]
  }
}

Make sure to load this CSS on the frontend yourself.

← Plugin Settings