Develop Reference

Editing the ckeditor config.js has no impact

I changed my CKeditor config.js file to include all the buttons possible to this:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
};
This config was generated using the CKeditor config generator tool.
After the change was deployed to my server and the page was refreshed using incognito mode in chrome none of the buttons changed.
If I add this code directly in my admin.master then the new button does show.
<script>
jQuery(function() {
CKEDITOR.config.extraPlugins = 'justify';
});
</script>
Is it possible that I am not using the config.js at all?

There's a Github issue that was posted for this https://github.com/galetahub/ckeditor/pull/433 (a long time ago).
Also, a discussion post about unreflected changes when using CKEDITOR.editorConfig here: https://ckeditor.com/old/forums/CKEditor-3.x/config.js-changes-not-reflected
My suggestion:
Try to clear the cache after you change the config.
Check the "console" tab in your developpers inspector inside the browser to verify if there's is any errors.
As an alternative you could use the replace() method after destroying the loaded instance inside the instanceReady event callback like :
CKEDITOR.instances.editor1.on("instanceReady", function(event) {
CKEDITOR.instances.editor1.destroy();
CKEDITOR.replace('editor1', {
toolbarGroups
});
});
Working demo fiddle.

I had this same problem and I had to delete the browser data. In Chrome you can select a time range. At first, I selected the last hour and this didn't work. Then I selected all times and it did.

How to completely disable auto changes in ckeditor?

I want to use <(label)> tag as well as class="" attribute in <(span)> margin-left (property in span) tag but ckeditor automatic replace label tag and class from span and it also remove margin property from style attribute in span tag

Ckeditor apply ACF (Advanced Content Filter) by default. If you don't want to apply this you can disable by add this in your config file :
CKEDITOR.config.allowedContent = true
This will allow all type of input into your editor. You can read more detail here.

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
'/',
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'paragraph', groups: [ 'list', 'blocks' ] },
{ name: 'document', groups: [ 'mode' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,PasteText,PasteFromWord,Find,Replace,Scayt,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Outdent,Indent,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Subscript,Superscript,Strike,BidiLtr,BidiRtl,Language,Anchor,Flash,Table,HorizontalRule,PageBreak,Iframe,Styles,Format,Font,Maximize,ShowBlocks,About,SpecialChar,Templates';
config.extraAllowedContent = 'label';// This will allow label tag..
};
You have to edit config.js file.

CKEDITOR version 4
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty.span = 0;
CKEDITOR.dtd.$removeEmpty.figure = 0; ...etc any tag

CKEditor toolbar configuration not working

I recently started working with CKEditor, but the toolbar has functions we will not be using.
I tried copying the code from the online toolbar configuration, but the toolbar doesn't change.
my config.js file looks like this:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};
which was copies directly from the configuration tool.
After the above, I tried pasting the code into the initialization function like the following block:
jQuery(function()
{
var editor = CKEDITOR.replace( 'message',
{
extraPlugins : 'stylesheetparser',
extraPlugins : 'filebrowser',
extraPlugins : 'popup',
//contentsCss : '<?= base_url(); ?>css/layout.css',
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
});
CKFinder.setupCKEditor(editor);
});
I also tried simply to show one part of the toolbar like this:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
];
// Toolbar groups configuration.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
];
};
None of the above changed anything in the toolbar, so I am not sure if I overlooked something.
Any help will be appreciated.

Please make sure you properly define your configuration - check the Setting CKEditor Configuration article for some code examples. Some of the mistakes you are doing:
Mixing up config.optionName and optionName.
Declaring extraPlugins multiple times - you should put all extra plugins into one declaration: config.extraPlugins = 'myplugin,anotherplugin';
Also check some of the CKEditor SDK samples for examples - if you open any of them (like this one), scroll down to the "Get Sample Source Code" section and grab the source code to copy.
Last but not least, use the JavaScript console of your browser to check for errors and clear the cache after each change!
And finally, it makes little sense to download a bloated CKEditor package and then remove plugins/buttons in your configuration - better create a custom build in CKBuilder.

include:
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/config.js"></script>
<textarea id="user_message"></textarea>
<script type="text/javascript">
var toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
var initEditor = function() {
return CKEDITOR.replace( 'user_message',{
toolbar : 'Basic',
uiColor : '#9AB8F3',
toolbarGroups,
});
}
initEditor();
</script>
Demo

my CKEditor config.js changes were not reflected in my toolbar until i put matched the same path as the Samples had. ex: the working sample has this path:
ckeditor\samples\index.html
ckeditor\config.js
so i made my working web page app with ckeditor this:
rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php
before, i had ckeditor on the same level as root, but i moved it into root.
of course i had to change the relative path statements, which are now this[and showing the other code that enables the div to show the CKEditor toolbar]:
echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>";
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>";
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>";
i hope this helps someone!

CKEditor invisible with plugins

I've got a problem with CKEditor. I want to install on my page CKEditor with some plugins. When I install editor without plugins, everything is okay. But when I added the plugins, the editor becomes invisible.
ScreenShots:
WITHOUT PLUGINS
WITH PLUGINS

As i faced the same problem before sometime because my config.js file was not configured properly. Kindly refer the below file.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.language = 'en';
config.uiColor = '#9AB8F3';
config.toolbar = 'Full';
config.height = 500;
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
//config.removePlugins ='liststyle,tabletools,scayt,menubutton,contextmenu';
};

config.fullPage = true; is not working in ckeditor inline mode. How to achieve that?

I'm using ckeditor inline mode. When i enter some html code by clicking on source button and after closing it when i reopen by clicking on source button only content inside body tag is been showing.
I have searched in ckeditor forums that all these html and body tags can be seen using configuration setting
config.fullPage = true;
I tried but that didn't work. Can someone please tell me why it was not working with inline mode.
Here is my configuration setting:
CKEDITOR.editorConfig = function( config ) {
// %REMOVE_START%
// The configuration options below are needed when running CKEditor from source files.
config.fullPage = true;
config.plugins = 'dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,clipboard,button,panelbutton,panel,floatpanel,colorbutton,colordialog,menu,contextmenu,div,resize,toolbar,elementspath,enterkey,entities,popup,filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,indentblock,indentlist,smiley,justify,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastefromword,preview,print,removeformat,save,selectall,showblocks,showborders,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,undo,wsc,sourcedialog,tokens';
config.skin = 'moono';
config.filebrowserBrowseUrl = '../kcfinder/browse.php?type=images';
config.filebrowserUploadUrl = '../kcfinder/upload.php?type=images';
config.allowedContent = true;
config.scayt_autoStartup = true;
config.baseFloatZIndex = 900;
config.removePlugins = 'youtube';
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
'/',
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'tokens'},
{ name: 'others' }
];

It's not working because it can't work. In full page mode you can edit entire document, so where and how would you like to load CKEditor there if all that has to be inline?