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!
Related
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.
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
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';
};
My CKeditor has some problems.
I noticed when I was working with the editor that I couldn't plave any inline styles. For example I want to do this:
<img alt="" src="upload/general.jpg" style="margin: 0 10px 10px 0; float: left;" />
But CKeditor strips it for me when I save it?!
<img alt="" src="upload/general.jpg" />
The most funny part is that I of course did some research and put the needed config items in place.
As the documentation says,
//Allow everything (disable ACF)
config.allowedContent = true;
But it still doesn't want to pass the full given string that I expect.
What the editor does give is tags, so those are allowed apparently.
EDIT
To see an live example you can go to this page: (my development machine)
http://dev.lemon-internet.nl:8888/stackoverflow/lemonadmin/pages/add
If the is asked for a username & password...
username: stackoverflow
password: stackoverflow
Here is the config file i load.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.skin = 'moonocolor';
config.toolbar =
[
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor', 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe'] },
'/',
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'embeddButtons', items: ['Youtube'] },
{ name: 'toolbar_name', items: ['doksoft_maps'] }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Subscript,Superscript';
// Se the most common block elements.
config.format_tags = 'h1;h2;h3;h4;h5;h6';
// Plugins used in the editor, STANDARD!
config.extraPlugins = 'youtube,magicline,tableresize,doksoft_maps';
// Allow advanced tab in editor
config.linkShowAdvancedTab = true;
config.linkShowTargetTab = true;
// Allow content in editor
config.allowedContent = true;
// Discover if we have an subdirectory
var paths = window.location.pathname.split("/");
// console.log(paths[1]);
if(paths[1] != 'lemonadmin')
{
path = '/' + paths[1];
}
else
{
path = location.protocol+'//'+location.hostname;
}
// Filemanager config for file and Image browsing and uploading
// If you are running in a subdirectory, ensure to add this here too
config.filebrowserBrowseUrl = path + '/framework/assets/js/ckeditor/plugins/filemanager/index.html';
config.filebrowserImageBrowseUrl = path + '/framework/assets/js/ckeditor/plugins/filemanager/index.html';
};
And here is the code to replace the textareas
CKEDITOR.replace( fulleditor, {
height: 600,
magicline_color: 'red'
} );
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?