Develop Reference

ckEditor in responsive web design

I am using CKEditor 4.5.11 in my responsive design website. Everything seems to be working fine except 2 ckEditor issues which are listed as under:
How to make images inserted responsive in ckEditor? I used my CSS for them but it didn't work at all. Even it didn't apply to those.
How to convert ckEditor full toolbar into basic and simple toolbar for mobile (small screen) devices e.g. when width goes less than 600px?
I searched a lot on Google and Stack Overflow but no proper solution has been given there except a few Drupal based workaround which I have nothing to deal with and none of my business. I think this topic is not considered seriously on Internet so far.
Any ckEditor plugin, custom JS or CSS solution will be accepted if it does work. Note that I don't want to change (upgrade) my ckEditor because it is very well setup with ckFinder and when I upgraded in past then everything got broken. So please no suggestion on upgrade.

For responsive images, use this:
CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');
If you want to modify the toolbar when browser resizes, you can't do that without destroying the instance and recreate it with another toolbar configuration (the contents will not get lost). For that, you can use window.matchMedia (supported in Firefox, Chrome and IE 10) like this:
var toolbar_basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
]
var 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' ] }
]
var mqs = [
window.matchMedia('(max-width: 600px)')
]
mqs.forEach(function(mq) {
mq.addListener(widthChange);
});
widthChange(); // call it once initially
function widthChange() {
if (CKEDITOR.instances.editor1) {
CKEDITOR.instances.editor1.destroy();
}
if (mqs[0].matches) {
// window width is less than 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_basic });
} else {
// window width is at least 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_full });
}
}

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/

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.

CKEditor set width

I am using CKEditor 4 with inline editing. I want to set custom height to the CKEditor toolbar that appears. I looked around and found a solution
config.height = 300;
config.width = 550;
I wrote the above two lines in the config.js file. But sadly, its not working for me.
Any Ideas? Or inline editing doesnt support custom height?
EDIT :
I alsp tried this in my js
editor.resize( 900, 300 );
but no luck

Just use the linebreak '/' as Zee suggested in the comment area.
For example:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'basicstyles', 'cleanup'] },
'/',
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'links' },
...
]
The linebreak will break the buttons into two rows.

I can't add the Source button to CKEditor 4's toolbar

I'm having trouble adding the Source button to CKEditor 4's toolbar. I just downloaded the new CKEditor today.
I'm using a config object named oConfig:
oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
['Bold', 'Source', 'Italic']
];
The toolbar shows up with only the Bold and Italic buttons. This example from CKEditor's docs tells me it should be working.

There are two reasons why it may be happening:
You have downloaded the basic package, where the sourcearea plugin is not included.
You are using CKEditor in inline mode. Source mode isn't available in inline mode yet.

Future googlers, for CKEditor v4.2 now there is a plugin to view source code in inline editing mode.
http://ckeditor.com/addon/sourcedialog

Here is a plugin I've made:
First of all, inside ckeditor/plugins/ create a new folder called "htmlSource", inside it create a file called "plugin.js" and inside this file paste the code below:
//-----------------------------Start Plugin Code-------------------------
plugInName = 'htmlSource';
CKEDITOR.plugins.add(plugInName,
{
init: function (editor) {
editor.addCommand('htmlDialog', new CKEDITOR.dialogCommand('htmlDialog'));
editor.ui.addButton(plugInName, {
label: 'Html Source',
icon: 'http://www.example.com/images/btn_html.png',
command: 'htmlDialog'
});
CKEDITOR.dialog.add('htmlDialog', function (editor) {
return {
title: 'Fuente Html',
minWidth: 600,
minHeight: 400,
contents: [
{
id: 'general',
label: 'Settings',
elements:
[
// UI elements of the Settings tab.
{
type: 'textarea',
id: 'contents',
rows: 25,
onShow: function () {
this.setValue(editor.container.$.innerHTML);
},
commit: function (data) { //--I get only the body part in case I paste a complete html
data.contents = this.getValue().replace(/^[\S\s]*<body[^>]*?>/i, "").replace(/<\/body[\S\s]*$/i, "");
}
}
]
}
],
onOk: function () {
var data = {};
this.commitContent(data);
$(editor.container.$).html(data.contents);
},
onCancel: function () {
// console.log('Cancel');
}
};
});
}
});
//--------------------Plugin Code Ends Here--------------------
Please notice that there is a parameter called icon where you must set the url of the Plugin Button Image, I just put an example url ('http://www.example.com/images/btn_html.png') you must use a valid one to see the plugin button.
To set this plugin in the ckeditor toolbar, you must configure it inside the config.js file, for example:
CKEDITOR.editorConfig = function (config) {
config.plugins =
'htmlSource,' + //Here is the plugin
'about,' +
'a11yhelp,' +
'basicstyles,' +
'bidi,' +
.....;
config.toolbar = 'Full'; //Add the plugin to the full toolbar
config.toolbar_Full = //Note that our plugin will be the first button in the toolbar
[
['htmlSource', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
['BidiLtr', 'BidiRtl'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-', 'About']
];
};
I know this is working, so if you have some trouble please tell me.

For me, it helped to use:
config.extraPlugins = 'htmlSource';

For CKEditor 4.1.1, a combination of the above two answers worked for me, although I had to make some minor tweaks. The portion that says "--- Start Plugin here ---" I was able to copy as-is. For the configuration options, I had to use
CKEDITOR.config.extraPlugins = 'htmlSource'; // Notice: "extraPlugins".
CKEDITOR.config.toolbar = 'Full';
CKEDITOR.config.toolbar_Full = ...;
instead of
CKEDITOR.editorConfig = function (config) { ...
Finally, this was all done in inline mode with a plain vanilla installation, i.e. I did not have to download any extra plugins to make this work.

I'm using Julio's plugin with version 4, and needed to make an adjustment to avoid this JS error:
TypeError: $(...).html is not a function
I swapped this line:
$(editor.container.$).html(data.contents);
with this:
// See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData(
data.contents,
function() {
this.checkDirty();
}
);
My guess is Julio's solution requires jQuery, and my approach is the CKEditor approach (or at least closer to it!).