Develop Reference

Config.js file in django-ckeditor not applying configurations

I have been trying to style Django-CKEditor by modifying the config.js file, all to no avail; my custom configuration in config.js is not working. I have gone as far as manually modifying the default CSS files, but all these modifications fail to work as well. Although when I use Chrome's developers tool to make some modifications, they all worked. My question is, is the config.js file not usable in Django?
config.js
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.uiColor = '#000000';
config.enterMode = CKEDITOR.ENTER_BR;
config.width = "100%";
config.height = "300";
config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;
config.autoGrow_maxHeight = 600;
};
settings.py
CKEDITOR_UPLOAD_PATH = "images/avatar/"
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_RESTRICT_BY_USER = True
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono-lisa',
'toolbar_Basic': [
['Source', '-', 'Bold', 'Italic']
],
'toolbar_Custom': [
{'name': 'styles', 'items': ['Styles']},
{'name': 'basicstyles',
'items': ['Bold', 'Italic', 'Underline']},
{'name': 'colors', 'items': ['TextColor']},
{'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
{'name': 'insert', 'items': ['Smiley']},
],
'toolbar': 'Custom',
},
}
HTML
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

For anyone who might come across the same issue, there is no need to modify the config.js file in your Django app except you have more advanced options to work with. In the simplest form, you can simply make the modifications within the CKEDITOR_CONFIGS settings in your settings.py file.
See a sample of my modifications below.
CKEDITOR_CONFIGS = {
'default': {
'toolbar_Basic': [
['Source', '-', 'Bold', 'Italic']
],
'width': 'auto',
'toolbar_Custom': [
{'name': 'basicstyles',
...more settings...
],
'toolbar': 'Custom',
# more custom settings
'toolbarCanCollapse': True,
'uiColor': '#f4f5f7',
},
}

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 automatically removes style attribute and add xss attribute 'Removed'

CKEditor automatically removes style attribute and add xss attribute 'removed' like if I put a style attribute in a element:
<div class="text-center" style="text-align: center;">Test Heading</div>
After save I got the following output:
<div class="text-center" xss="removed">Test Heading</div>
My configuration is:
var toolbar_custom=[
{ name: 'document', items: [ 'Source' ] },
{ name: 'editing', items: [ 'Scayt' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ]}
];
jQuery(function(){
CKEDITOR.replace('template_editor_custom',{
uiColor:'#2778a7',
toolbar:toolbar_custom,
autoParagraph:false,
enterMode:CKEDITOR.ENTER_DIV,
allowedContent:true,
extraAllowedContent:'*{*}'
})
});
Html:
<textarea class="form-control textbox-style" id="template_editor_custom" name="page[content]" placeholder="Page content"><?php echo set_value('page[content]', $content); ?></textarea>

I'm using CKEditor in CodeIgniter
It's worked using 2nd argument of $this->input->post('filed_name', FALSE)
Input Text
<div style="background-color:#eee; padding:15px">
<span style="font-size:16px;"> <u>Friendly Reminder</u> </span>
</div>
Example 1
<?php
echo html_escape($this->input->post('template_editor_custom'));
?>
Output
<div xss=removed>
<span xss=removed> <u>Friendly Reminder</u> </span>
</div>
Example 2
<?php
echo html_escape($this->input->post('template_editor_custom', FALSE));
?>
Output
<div style="background-color:#eee; padding:15px">
<span style="font-size:16px;"> <u>Friendly Reminder</u> </span>
</div>

It's no an issue of CKEditor.
I suspect you are using CodeIgniter 2.x and you have enabled 'Global XSS Filtering'. You need to turn it off in you config file:
$config['global_xss_filtering'] = FALSE;
xss=removed is typical sanitizing method used in CodeIgniter.

I solve my problem by changing the core/Security.php file.
Just go to _sanitize_naughty_html function and remove style tag from these two static array:
static $naughty_tags = array(
'alert', 'prompt', 'confirm', 'applet', 'audio', 'basefont', 'base', 'behavior', 'bgsound',
'blink', 'body', 'embed', 'expression', 'form', 'frameset', 'frame', 'head', 'html', 'ilayer',
'iframe', 'input', 'button', 'select', 'isindex', 'layer', 'link', 'meta', 'keygen', 'object',
'plaintext', 'style', 'script', 'textarea', 'title', 'math', 'video', 'svg', 'xml', 'xss'
);
static $evil_attributes = array(
'on\w+', 'style', 'xmlns', 'formaction', 'form', 'xlink:href', 'FSCommand', 'seekSegmentTime'
);
I solved the problem like this way without compromising my entire site security. In future if you want to upgrade your CI version then after upgrading find these two array inside _sanitize_naughty_html function in Security.php and remove the style tag from these two list.
Thank You.

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/

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!).