Related
Can someone help regards an issue I have with the CKEditor inline. I cannot get the toolbar to appear? Have a look at this fiddle:
https://jsfiddle.net/rr2m49zn/4/
Clicking on 'Edit me' should bring up the tool bar
HTML
<body><table><tbody><tr><td contenteditable="true">Edit me</td></tr></tbody></table></body>
JS
if ( typeof CKEDITOR == 'undefined' )
CKEDITOR.add
CKEDITOR.on( 'instanceCreated', function ( event ) {
var editor = event.editor,
element = editor.element;
// Customize editors for headers and tag list.
// These editors do not need features like smileys, templates, iframes etc.
// Customize the editor configuration on "configLoaded" event,
// which is fired after the configuration file loading and
// execution. This makes it possible to change the
// configuration before the editor initialization takes place.
editor.on( 'configLoaded', function () {
editor.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' ] }
];
editor.config.removeButtons = 'Source,Save,NewPage,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Replace,Find,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Blockquote,BidiLtr,BidiRtl,Language,Anchor,Image,Flash,Table,HorizontalRule,Smiley,PageBreak,Iframe,Maximize,ShowBlocks,About,Placeholder';
} );
} );
}
What am I missing?
Spell Check is not working in my CKEditor. I tried disableNativeSpellChecker = false but in vain. Here is my config.js. My CKEditor version is 4.5.6 Any idea ?
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.disableNativeSpellChecker = true;
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection'] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Use line below for line break in toolbar
// '/',
// Html encode ouput
config.htmlEncodeOutput = true;
config.removePlugins = 'elementspath,maximize,scayt';
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Strike,Subscript,Superscript,Source,About,Styles,Blockquote,Link,Unlink,Anchor,Image,Table,HorizontalRule,SpecialChar';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};
Integrated the Browser Spell check by adding the following code to config.js
config.disableNativeSpellChecker = false;
config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';
Hold down the SHIFT key then click the right mouse button on the text.
At this point the usual context menu with options will be displayed.
On Linux you can use either the SHIFT or the CONTROL keys.
On Mac you can use either the SHIFT or the COMMAND keys.
Here are screenshots WITH and WITHOUT modifier key.
Copy and paste from MS Word to CKEditor works fine in all browsers on the PC. But in Firefox on a Mac, headings in bullets disappear and some other style issues are also ripped.
My config is like this:
CKEDITOR.editorConfig = function( config ) {
config.format_tags = 'h1;h2;h3;h4';
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles', groups : [ 'format', 'insert' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align'] },
{ name: 'links', groups: [ 'link' ] },
{ name: 'about' },
{ name: 'document', groups: [ 'mode' ] }
];
config.removeButtons = 'Undo,Redo,Image,Flash,Smiley,PageBreak,Iframe,SpecialChar,HorizontalRule,Cut,Copy,Anchor,Strike,Subscript,Superscript,Save,Newpage,Preview,Print,Templates,About,Help,Document,Language,Blockquote,Indent,Outdent,CreateDiv,NewPage,Styles,Font,FontSize';
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;
config.autoGrow_maxHeight = 600;
};
Any one encountered this issue also?
Please report this issue in our CKEditor bug tracker at http://dev.ckeditor.com. Thanks!
I 'd like to ask this small but very important question i got: (I Downloaded CKeditor 4.3.2, and believe me i've been looking for this over the internet for ssooooooo long without any success.)
I've tried to show the 'Smiley' icon in my toolbar, but it doesn't show it, and that happens with some others like 'Save', 'Print', 'NewPage' for instance and i don't know why. Also when i insert a link of a video isn't show either in order people watch it once is posted... Everything works just fine with the others but not with these i just mentioned! Please! thanks for reply!
PS: I've found in some forums that icons in these version 4.3.2 have change theirs names, u think that is the reason?
here is my code:
CKEDITOR.editorConfig = function( config )
{
uiColor: '#14B8C4',
config.toolbar = 'Full';
`config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-', 'Save','NewPage','DocProps','Preview','Print','-','Templates', 'Emoticons' ] },//solo Source
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo', 'clipboard' ] },//BIen
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt', 'TextColor' ] },//Solo SpellChecker
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', //nada
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },//Todas
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },//Todas hasta Bloquiote
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] }, //Todas
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule',"Smiley",'SpecialChar','PageBreak','Iframe' ] }, //Falta flash, smiley, ifame
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }, //ninguno
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-' ] }
];
//ToolBar groups configuration
config.toolbarGroups = [
{ name: 'document', groups: ['mode', 'document', 'doctools']},
{ name: 'clipboard', groups: ['clipboard', 'undo']},
{ name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{ name: 'forms'},
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{ name: 'links'},
{ name: 'insert'},
'/',
{ name: 'styles'},
{ name: 'colors'},
{ name: 'tools'},
{ name: 'others'},
];
};
`
Finally I got the solution which was very simple. But, before I tell you the solution I'll tell you the reason:
CKEditor has been updated. So, some plugins' names have been changed, you're not going to find them with the same name as you used to.
Solution is: go to Download CKEditor with plugins selected by you, and there you're going to find three different packages to download and below there's another one: "Or let me customize my CKEditor" click on it and "download & customize editor".
After that you'll be redirected to another page on which you'll see two columns, the left one shows you all the plugins that come with the package by default (you can also eliminate some plugins if you don't want them) and the right column shows you some plugins that can be added to the package().
Hope you find this solution helpful.
Do you have the plugins installed to support those missing buttons?
I was seeing that in the CKeditor we've been using for a while now, all of the sudden, it lost some of it's toolbar buttons.
They were configured to be there, yet did not display. Buttons like TextColor, the Justifieds, etc..
What our problem turned out to be was that we were missing the plugins for these buttons. We must have switched from a compilation that included some plugins to the base code or something.
I am showing a ckeditor in my webpage using class="ckeditor" way. How can I configure my ckeditor to just show a basic toolbar. Here I found the sample page for showing a basic toolbar but not getting from documentation how to show that.
http://ckeditor.com/demo
check the Custom toolbar tab and see the first sample which has a very basic type of toolbar, how can I show it?
here is my code
<body>
<textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>
I want to show basic toolbar for all instances of ckeditor of my website.
If you use Basic it will show all Toolbar, So use this
CKEDITOR.config.toolbar = [
['Styles','Format','Font','FontSize'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
'/',
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor','Source']
] ;
If you put the two previous answers together, you will have the full solution. The first thing is to add the options in the 'config.js' file in your 'ckeditor' folder.
CKEDITOR.editorConfig = function( config ) {
config.skin = 'bootstrapck';
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','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']
];
};
Then add the call to the 'Basic' config in the HTML file.
<textarea id="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'ckeditor',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
That should be all you need, and obviously do not forget to call the 'ckeditor.js' file in your html file.
You need to set a specific configuration on launch.
<script type="text/javascript">
CKEDITOR.replace( 'description',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
description is refering to the id of the editor on your website.
Interesting links:
Configuration settings
Toolbar configuration
General CK Docs
UPDATED FOR 2018:
Those helpful tykes at CKEditor have only gone and created an online editor that you can customise to your hearts content! It's a nightly build so a static URL is of no use to you - navigate from http://nightly.ckeditor.com to the basic configurator option then select the TOOLBAR CONFIGURATOR button.
Copy and paste the generated content in to the ivoryckeditor bundle's config.js file (Web folder) and it should work without needs any of other file changes.
I built the following simple layout to show cut & paste operations and :
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 = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
};
I was also stuck in this issue but after so many trials i got solution of my problem:
use this in ckeditor.rb:-
Ckeditor.setup do |config|
require "ckeditor/orm/active_record"
config.cdn_url = "//cdn.ckeditor.com/4.12.1/full/ckeditor.js"
end
you can also change full to basic, standard or classic as per your requirement
best of luck