CKEditor bower global default config.js

Question

I have an angular project where we use angular-ckeditor. For this angular module I need ckeditor.js, which I installed through bower. Now we have multiple pages where we have ckeditor instances, but they all should use the same configuration.

With CKEditor you can change the default configuration by changing the config.js. This however is not a good option, because when the application is deployed/shared/reinstalled bower installs the ckeditor scripts and so the config.js is also overwritten.

I know I can do something like CKEDITOR.replace('myEditor', { customConfig: '/custom/path/to/config/ckeditor_config.js' });, but this would be per instance, plus I don't know at runtime what the id's are for the editors.

Is there any other way to define global configuration for CKEditor? Without touching the config.js in its library?

My possible ugly solutions:

Check in the CKEditor scripts in source control, and don't install through bower (so the config.js won't be overridden)
Create a custom directive that just replaces the directive with the ckeditor and the customConfig configuration
Create a gulp task that overrides the config.js after the bower installation
Add id's to all ckeditors and use the CKEditor.replace() method
Pass the configuration to each instance of the ckeditor (<textarea ckeditor="{ customConfig: 'myCustomConfig' }"></textarea>)
Use a method that I missed in the documentation but does exist (preferred! :))

What would be the 'best' solution for this?

duchuy duchuy · Accepted Answer · 2016-09-01T06:39:40

I add ckeditor.config.js into index.html (my project using Grunt) and link to ckeditor_config.js

// scripts/libs/ckeditor.config.js
CKEDITOR.config.customConfig = "/scripts/libs/ckeditor_config.js";

// scripts/libs/ckeditor_config.js
CKEDITOR.editorConfig = function (config) {
  config.toolbarGroups = [
    { name: 'mode' },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find' ] },
    { name: 'basicstyles', groups: [ 'basicstyles' ] },
    { name: 'links' },
    { name: 'styles' },
    { name: 'cleanup' }
  ];
	config.removeButtons = 'Anchor,Strike,Styles,Font';
  //config.removePlugins = 'font';
  config.extraPlugins = "find,font";
}

<!-- index.html -->
<script src="bower_components/ckeditor/ckeditor.js"></script>
<script src="scripts/libs/ckeditor.config.js"></script>

CKEditor bower global default config.js

1 Answers