Develop Reference

Dangerous behavior disallowedcontent let me insert js in some case

I'm trying to let my user can paste some html tag in their post by using ckeditor.
But I have blacklisted some of them like script for example for avoiding XSS attack.
Here is part of my config.js
'...'
config.allowedContent = {
$1: {
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = 'script;';
'...'
config.toolbar_mini = [
{ name: 'paragraph', groups: ['blocks', 'align', 'bidi' ], items: ['Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'styles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'insert', items: [ 'Imgur', 'tliyoutube2', 'linkfile', 'Source'] },
];
When I click on Source for adding html tag and add
<script>alert('test')</script then I click on Source for adding non-html content and submit my post. CKEDITOR will remove the script tag correctly as I expected.
But if do the same:
Click on Source then add my script tag
<script>alert('test')</script> and submit the post without being out of Source mode. The script is saved in my DB and executed.
Also if I try to edit this message and go on Source mode CKEDITOR disable this script tag.
Obviously I have to create validator on my backend for avoiding this. But I don't think this the correct behavior of disallowedContent or if it is then I don't understand why.
Did I missconfigure my CKEDITOR or is it the correct behavior ?

It seems that Source mode doesn't implement filtering: https://github.com/ckeditor/ckeditor-dev/issues/2326
I would disable Source plugin or prevent the submission while in Source mode.

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/

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.