Develop Reference

Unable to add enable the scayt in toolbar in CKEditor

my config.js is as follow
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.height='10em';
// The toolbar groups arrangement, optimized for a single toolbar row.
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' }
/*{ name: 'about' }*/
];
config.enterMode = CKEDITOR.ENTER_BR;
// The default plugins included in the basic setup define some buttons that
// are not needed in a basic editor. They are removed here.
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'scayt';
};
by adding config.extraPlugins = 'scayt'; my Ckeditor is getting disabled I put scayt folder in plugins folder of CKEditor. Please help if you know what wrong I did. I want to add spell checker in CKeditor.

I was struggeling with this too.
The solution for me was that the toolbar option had to start with a Capital "S"
so I had to use 'Scayt' instead of 'scayt'
CKEDITOR.config.toolbar_MA = [
['Scayt', '-', 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo', 'Source'],
];
CKEDITOR.config.disableNativeSpellChecker = false;
CKEDITOR.config.defaultLanguage = 'fr';
CKEDITOR.config.language = 'fr';
// Turn on SCAYT automatically
CKEDITOR.config.scayt_autoStartup = true;
CKEDITOR.config.scayt_sLang = 'fr_FR';

Try adding this:
config.scayt_autoStartup = true;
I didn't define:
config.extraPlugins = 'scayt';
And it was working
EDIT
You can also try initiating in javascript like here: http://jsfiddle.net/ddan/usz40fb5/
var editor;
function createEditor( lang ) {
editor && editor.destroy();
editor = CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar,scayt',
// Turn on SCAYT automatically
scayt_autoStartup: true,
language: lang,
} );
}
createEditor( 'en' );
EDIT
Based on your comment:
This one must work. Using version 4.4.3. The example I give is using CDN for ckeditor. If you want to replace to local js feel free to include your own script or download that script and load in from local library.
<!-- CKeditor 4.4.3 -->
<script src="http://cdn.ckeditor.com/4.4.3/standard/ckeditor.js"></script>
<textarea id="editor"> worng spelling</textarea>
<script>
// Shorthand for $( document ).ready()
$(function() {
CKEDITOR.replace( 'editor', {
scayt_autoStartup: true
});
});
</script>
See working example: http://jsfiddle.net/ddan/KS3p4/8/

CK Editor config.js changes doesn't work (basic version)

I'm having trouble setting up CKEditor. I managed to make it work, production-wise, but now I need to tweak some options like:
config.entities_latin = false;
(inside config.js), and it doesn't work, it still changes caracters like: šđžćčšđ to &Scaron etc.
I have tried the: config.autoParagraph = false; this doesn't work too.
However if I delete some elements from: config.toolbarGroups = [ ] (this works)..
Please notice that I have to use the basic version (for some reason, standard and full version doesn't work at all on server, only locally) :S
Anyone, help please...
This is entire config.js:
/**
* #license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
config.contentsLanguage = 'hr';
config.entities_latin = false;
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for a single toolbar row.
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' }
];
// The default plugins included in the basic setup define some buttons that
// we don't want too have in a basic editor. We remove them here.
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
// Let's have it basic on dialogs as well.
config.removeDialogTabs = 'link:advanced';
};

Depends on which version you have. Try removing all entities. This works for me, my cke output is 100% XML compatible.
config.entities = false;
config.removePlugins = 'entities';
You can add config.entities_greek = false; or the latin one too but I don't really think it's necessary.

How to add Insert Image button to CKEditor?

I'm using CKEditor 4.1.1 and can't figure out how to show the Insert Image button in th toolbar. This is my current CKEditor configuration in config.js.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for a single toolbar row.
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' },
{ name: 'about' }
];
// The default plugins included in the basic setup define some buttons that
// we don't want too have in a basic editor. We remove them here.
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Font,SpellChecker';
config.disableNativeSpellChecker = false;
config.removePlugins = 'scayt,menubutton,contextmenu';
// Let's have it basic on dialogs as well.
config.removeDialogTabs = 'link:advanced';
};
How should I modify this to show the Insert Image button?
I have been reading the documentation and trying various things, but nothing has worked thus far.

I used to have the same issues long time ago. I have opened my old site code to check it out for you :
try to add this to your config.js
in the config.toolbarGroups Object
{ name: 'insert', items: [ 'Image']},
instead of
{ name: 'insert'},
if that doesn't work replace image with lowercase
Btw I have found this documentation which might be helpful
Good Luck

first you need to check your
CKEditor Which css using for example
CK Editor\skins\office2003\editor.css in that you can add image the icon of image button i searched and checked it works for me
.cke_skin_office2003 .cke_button a.cke_button_ICONNAME .cke_icon
{
background-image:url(ICONNAME.png);
background-repeat:repeat;
background-position:0px;
}
hopes it helps some one

Make sure you install the Image (https://ckeditor.com/cke4/addon/image). Extract the downloaded file, and put into plugins folder in ckeditor installation path. after that, edit your config.js file put line like below:
CKEDITOR.editorConfig = function( config ) {
.....
config.extraPlugins = 'image';
});
Reload your page and done.

Disabled text area

I have an editor instance that opens inside a modal dialog (on a jquery.dialog("open")).
The problem is that sometimes in Chrome browser, the editable area comes disabled by default (and the user cannot write any text). I can do two thing to enable it :
Click the 'source' button twice
Resize the editor
Is this a known problem? I cannot find any sources/solutions on it.
Please note that Firefox browser has never created this problem.
Also this question addresses this problem CKeditor textarea is disabled up until when I click the source button? but no answer is given.
Thanks
UPDATE
My html
<textarea name="problem" id="problem" class="ckeditor" ></textarea>
My initialization code:
var editor = CKEDITOR.instances.problem;
editor.setData('');
editor.resize( '100%', '80', true );
My config.js :
CKEDITOR.editorConfig = function( config ) {
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ 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', ] },
{ name: 'insert', items : [ 'Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','Source'] }
];
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.scayt_autoStartup = true;
config.skin = '/kama';
config.entities_processNumerical = 'force';
};
UPDATE 2
Here is also a screen shot of what is happening this time in Firefox 21.0:
The difference between the Chrome error is that the 2 steps listed above to enable the editor didn't work. I had to refresh the page in order to make it work.
Here is the actual html code when this occurred.
Please also note that there where no console errors.

CKEditor Defining Custom Toolbar

I am using CKEditor and have defined a custom toolbar in the config.js file.
However, this custom toolbar does not appear when I refresh the page where I have the CKEditor appearing.
Below is my custom toolbar in the config.js file.
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'Custom';
config.toolbar_Custom =
[
{ name: 'document', items : [ 'NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
Is there anything else that I need to do other than just adding the toolbar to the config file.
Thanks for your time and help.

There are two things that could be happening. One, your config.js file could be cached, so it's loading the previous file from before your changes were made, in which case you need to either clear your browser cache or hit ctrl-F5 in your browser to fully reload your page. Or two, you're using a combo-loaded (and minified) config.js file, which would mean that you need to run the packaging tool every time you make changes to the file. See this for more info on the packaging tool. Hope that helps!