Docs

Editing configuration

Below is the complete code of the default config. Instead of copying it to your website, we recommend use it as an example. If you want to change some parameter, specify it and skip all others: your config will be merged with the default on upon initialization of CKEditor or TinyMCE.

For instance, if you want to change the URL of the file manager and the API key for YouTube, you should simply define the config as follows:

{
  urlFileManager: 'https://mywebsite.com/flmngr.php',
  widgets: {
    YouTube: {
      apiKey: "...apiKey..."
    }
  }
}

Ways to set the config

In all editors: TinyMCE 5, TinyMCE 4, CKEditor 4, the config file is loaded by the editor upon startup, but ways to pass it are different.

Setting the config in TinyMCE 5 & TinyMCE 4

In both versions of TinyMCE the config is passed using the following way: as a JSON, as an argument of the init function. For example:

tinymce.init(
  {
    selector: "#editor",
    // all other parameters go here
  }
);

It is this JSON object that you need to change or append to, and it is this format that all example on this website are written in.

Setting the config in CKEditor 4

In CKEditor there is a way to set the config the same way as in TinyMCE, but using CKEditor's own API init functions: CKEDITOR.replace and CKEDITOR.inline:

CKEDITOR.replace(
  "#editor",
  {
    // your parameters are here
  }
);

Also, CKEditor offers an option to set the config in the config.js in a slightly different format:

CKEDITOR.editorConfig = function( config ) {
    config.urlFileManager = "/path/to/flmngr.php";
    config.framework = "bootstrap4";
};

Both ways are equivalent.

Setting the config in Drupal 8

Manual editing of the config in Drupal 8 is not necessary thanks to the N1ED Drupal module.

Drupal 8 generates the config "on the fly" using the settings you define in the configuration panel for each text format individually. When you enter the settings of the text format you want to change, you will see all available options: edit them and then click Save.

Setting the config in other CMS

Refer to the documentation of your CMS to change settings of TinyMCE or CKEditor. In some CMS settings are isolated in a certain file, but usually they are also available somewhere in the control panel, and the CMS generates the configuration file automatically.

Complete config of all add-ons of the N1ED ecosystem

{
    enableN1ED: true,
    enableBootstrapEditor: true,
    enableFlmngr: true,
    enableImgPen: true,
    enableTranslator: true,

    ui: {
        leftSidebar: true,
        sidebarInFullScreenOnly: true,
        openFullScreenOnFocus: true,
        showFullScreenButton: true,
        fullScreenButtonTitle: "Edit",
        fullScreenExitButtonTitle: "OK",
        showStructure: false,
        minZIndex: 200000,
        iframePopUp: true,
        disableNotices: false
    },

    dirUploads: "",
    urlFiles: "",
    urlFileManager: "",

    preview: {
        Mobile: 576,
        Note: 768,
        Table: 992,
        Desktop: 1200
    },

    framework: "bootstrap4",
    bootstrap4: {
        includeToGlobalDoc: true,
        columnCount: 12,
        classPrefix: "",
        breakpoints: [
            {
                name: "",
                title: "XS",
                minWidth: 0
            },
            {
                name: "sm",
                title: "SM",
                minWidth: 576
            },
            {
                name: "md",
                title: "MD",
                minWidth: 768
            },
            {
                name: "lg",
                title: "LG",
                minWidth: 992
            },
            {
                name: "xl",
                title: "XL",
                minWidth: 1200
            }
        ],

        enabled: true,

        include: true,
        url: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/",
        urlJQuery: "https://code.jquery.com/jquery-3.3.1.slim.min.js",
        includeJQuery: true,

        rootContains: "containers",
        detectStructure: true,
        fixStructure: true,
    },
    bootstrap3: {
        includeToGlobalDoc: true,
        columnCount: 12,
        classPrefix: "",
        breakpoints: [
            {
                name: "xs",
                title: "XS",
                minWidth: 0
            },
            {
                name: "sm",
                title: "SM",
                minWidth: 768
            },
            {
                name: "md",
                title: "MD",
                minWidth: 992
            },
            {
                name: "lg",
                title: "LG",
                minWidth: 1200
            },
        ],

        enabled: true,

        include: true,
        url: "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/",
        urlJQuery: "https://code.jquery.com/jquery-1.12.4.min.js",
        includeJQuery: true,

        rootContains: "containers",
        detectStructure: true,
        fixStructure: true,
    },
    include: {
        css: [],
        js: [],
        includeCssToGlobalDoc: true,
        includeJsToGlobalDoc: true,
    },
    widgetList: [
        "Image", "ImagePreview",
        "ImageGallery", "FontAwesome",
        "YouTube", "Table",
        "Link", "Button",
        "Tabs", "Accordion",
        "Alert", "Anchor",
        "Badge", "Header",
        "IFrame", "HTML"
    ],
    widgets: {
        YouTube: {
            apiKey: "",
            maxResults: 20
        },
        FontAwesome: {
            defaultColor: "#000000",
            template: {
                classes: [
                    "img-fluid"
                ],
                styles: {
                    width: "1.33em",
                    height: "1.33em"
                },
                attributes: {}
            }
        },
        File: {
            template: {
                classes: [],
                styles: {
                    "display": "inline-flex",
                    "justify-content": "center",
                    "align-items": "center"
                },
                attributes: {
                },
                innerHtml: `
                  <img style="width:24px;height:24px;margin-right:4px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjBGREI0RDQ4NzJFMTFFN0I4QkFBRDNGMzlFODVDRTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjBGREI0RDU4NzJFMTFFN0I4QkFBRDNGMzlFODVDRTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMEZEQjREMjg3MkUxMUU3QjhCQUFEM0YzOUU4NUNFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMEZEQjREMzg3MkUxMUU3QjhCQUFEM0YzOUU4NUNFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+e4R0AAAErSURBVHjaYvz//z8DLQETA40BzS1gwSbIyMiIVbGMjMx+EP3kyRNHbPLYgnvoB9GoBSPZAmCa55SVlXUnZABIjYKCAgc5PmgCZpytQIui8DgiGqTmz58/TSRb8Pv37wYgdQiIl0hLS6ejy0PFFoPUANU24jKHEVv2hhUVUlJSXExMTFuATHugukSgeCK0SFgAZM8DMg/8+/fP99mzZ99wFRV4LQABFRUVvh8/fmwHMs2A+ANIGoj5gfgUBweH5507dz7hK4sIWoDkk01ApjNUfs/fv3/9YS6n2AIQEBUV5WFnZ98GYv/8+dPr9evXX4gpTYm2AGYJ0Cf/X758+ZXY4poFR9pOACpWwJM8sTnqAZBaQJQFQMMTQCmHlBwL1HMQmwWMo5U+IQAQYACY0oOYdF8ezgAAAABJRU5ErkJggg=="/>
                  <a style="font-size:16px;margin-right:15px;" href="{URL}">Download {NAME}</a>
                `
            }
        },
        ImagePreview: {
            templateLink: {
                classes: [],
                styles: {
                    "background-color": "white",
                    "margin": "3px",
                    "outline": "none"
                },
                attributes: {
                    "rel": "lightbox"
                }
            },
            templateImage: {
                classes: [],
                styles: {
                    "width": "250px",
                    "outline": "none"
                },
                attributes: {}
            }
        },
        Image: {
            template: {
                classes: [
                    "img-fluid"
                ],
                styles: {},
                attributes: {}
            }
        },
        ImageGalleryPreview: {
            templateLink: {
                classes: [],
                styles: {
                    "background-color": "white",
                    "margin": "7px",
                    "outline": "none"
                },
                attributes: {
                    "rel": "lightbox"
                }
            },
            templateImage: {
                classes: [],
                styles: {
                    "width": "250px",
                    "outline": "none",
                    "display": "flex"
                },
                attributes: {}
            }
        },
        ImageGallery: {
            templateGallery: {
                classes: [],
                styles: {
                    "display": "flex",
                    "flex-wrap": "wrap",
                    "background-color": "#EEE",
                    "padding": "7px",
                    "width": "fit-content",
                    "margin": "15px auto",
                },
                attributes: {}
            }
        },
        Table: {
            template: {
                classes: [],
                styles: {
                    "width": "100%"
                },
                attributes: {}
            }
        },
        Link: {
            template: {
                classes: [],
                styles: {},
                attributes: {
                    "href": "/"
                }
            }
        },
        Button: {
            template: {
                classes: ["btn", "btn-primary"],
                styles: {},
                attributes: {
                    "href": "/"
                }
            }
        },
        Accordion: {
            templateAccordion: {
                classes: [],
                styles: {},
                attributes: {}
            },
            templateCard: {
                classes: [],
                styles: {},
                attributes: {}
            }
        },
        Tabs: {
            templateTabs: {
                classes: [],
                styles: {},
                attributes: {}
            },
            templateTab: {
                classes: [],
                styles: {},
                attributes: {}
            },
            templateNavItem: {
                classes: [],
                styles: {},
                attributes: {}
            },
        }
    },

    Translator: {
        yandexAPIKey: "trnsl.1.1.20130819T112450Z.e14ecaa487166a0d.86f8dd0967b040960bdc710ece4be7420e88ddb2",
        googleAPIKey: "",
        langFrom: "en",
        langTo: "de",
        provider: "yandex",
    }
}