Skip to content

Instantly share code, notes, and snippets.

@MrKarlDilkington
Created August 31, 2017 06:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MrKarlDilkington/5a14cf2c8aca511c8c9d2026e07b297c to your computer and use it in GitHub Desktop.
Save MrKarlDilkington/5a14cf2c8aca511c8c9d2026e07b297c to your computer and use it in GitHub Desktop.
Example site.php for adding custom CKEditor configuration options - application\config\site.php
<?php
return [
'sites' => [
'default' => [
'editor' => [
'ckeditor4' => [
// add custom configuration options
// https://docs.ckeditor.com/#!/api/CKEDITOR.config
'custom_config_options' => [
// define what formatting tags to use
// - each element is separated with a semi-colon (no spaces)
// Example: use h2, h3, h4, and p only
'format_tags' => 'h2;h3;h4;p',
// remove buttons from the toolbar
// - each button is comma separated (no spaces)
// - button names are case-sensitive
// Example: remove the Underline, Subscript, and Superscript buttons
'removeButtons' => 'Underline,Subscript,Superscript'
],
// group and order toolbar buttons
// - an example of how to group toolbar buttons can be found here:
// https://ckeditor.com/tmp/4.5.0-beta/ckeditor/samples/toolbarconfigurator/index.html
// Example: reorder the toolbar groups and add a row separator
'toolbar_groups' => [
['name' => 'styles', 'groups' => ['styles']],
['name' => 'links', 'groups' => ['links']],
['name' => 'paragraph', 'groups' => ['paragraph']],
['name' => 'about', 'groups' => ['about']],
['name' => 'document', 'groups' => ['document']],
['name' => 'doctools', 'groups' => ['doctools']],
['name' => 'clipboard', 'groups' => ['clipboard']],
['name' => 'undo', 'groups' => ['undo']],
['name' => 'others', 'groups' => ['others']],
['name' => 'tools', 'groups' => ['tools']],
// row separator
// - rows separators start the beginning of new rows
// - without them, the following buttons and button groups will not start from the left side of the toolbar
'/',
['name' => 'find', 'groups' => ['find']],
['name' => 'selection', 'groups' => ['selection']],
['name' => 'spellchecker', 'groups' => ['spellchecker']],
['name' => 'editing', 'groups' => ['editing']],
['name' => 'basicstyles', 'groups' => ['basicstyles']],
['name' => 'cleanup', 'groups' => ['cleanup']],
['name' => 'list', 'groups' => ['list']],
['name' => 'mode', 'groups' => ['mode']],
['name' => 'indent', 'groups' => ['indent']],
['name' => 'blocks', 'groups' => ['blocks']],
['name' => 'align', 'groups' => ['align']],
['name' => 'bidi', 'groups' => ['bidi']],
['name' => 'insert', 'groups' => ['insert']],
['name' => 'forms', 'groups' => ['forms']],
['name' => 'colors', 'groups' => ['colors']],
],
// add custom JavaScript configuration options
'editor_function_options' => <<<'EOD'
console.log('goat milk fudge');
CKEDITOR.on('dialogDefinition', function(event) {
// get the dialog name and its definition from the event data
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
// check if the definition is from the dialog we are looking for
// Example: link plugin dialog
if (dialogName === 'link') {
// remove a tab and all of its contents
// Example: remove the Advanced tab from the Link plugin
// dialogDefinition.removeContents('advanced');
// get the dialog definition contents for a specific tab
// - remove the fields by name
// Example: get the Advanced tab contents and remove individual fields
var advancedTab = dialogDefinition.getContents('advanced');
advancedTab.remove('advAccessKey');
advancedTab.remove('advName');
advancedTab.remove('advLangCode');
advancedTab.remove('advTabIndex');
advancedTab.remove('advRel');
advancedTab.remove('advCharset');
advancedTab.remove('advStyles');
advancedTab.remove('advTitle');
advancedTab.remove('advContentType');
advancedTab.remove('advLangDir');
}
// Example: image plugin dialog
if (dialogName === 'image') {
// remove a tab and all of its contents
// - the tab id is what you will use to remove the tab
// - the tab id is case-sensitive
// Example: remove the Link tab from the Image plugin
dialogDefinition.removeContents('Link');
}
});
EOD
// if additional arrays are added after editor_function_options, the comma must be on the next line, not on the same line as EOD
]
]
]
]
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment