Develop Reference

Ckeditor4 Advanced Content Filter strips style:""

My CKeditor has some problems.
I noticed when I was working with the editor that I couldn't plave any inline styles. For example I want to do this:
<img alt="" src="upload/general.jpg" style="margin: 0 10px 10px 0; float: left;" />
But CKeditor strips it for me when I save it?!
<img alt="" src="upload/general.jpg" />
The most funny part is that I of course did some research and put the needed config items in place.
As the documentation says,
//Allow everything (disable ACF)
config.allowedContent = true;
But it still doesn't want to pass the full given string that I expect.
What the editor does give is tags, so those are allowed apparently.
EDIT
To see an live example you can go to this page: (my development machine)
http://dev.lemon-internet.nl:8888/stackoverflow/lemonadmin/pages/add
If the is asked for a username & password...
username: stackoverflow
password: stackoverflow
Here is the config file i load.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.
config.skin = 'moonocolor';
config.toolbar =
[
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor', 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe'] },
'/',
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'embeddButtons', items: ['Youtube'] },
{ name: 'toolbar_name', items: ['doksoft_maps'] }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Subscript,Superscript';
// Se the most common block elements.
config.format_tags = 'h1;h2;h3;h4;h5;h6';
// Plugins used in the editor, STANDARD!
config.extraPlugins = 'youtube,magicline,tableresize,doksoft_maps';
// Allow advanced tab in editor
config.linkShowAdvancedTab = true;
config.linkShowTargetTab = true;
// Allow content in editor
config.allowedContent = true;
// Discover if we have an subdirectory
var paths = window.location.pathname.split("/");
// console.log(paths[1]);
if(paths[1] != 'lemonadmin')
{
path = '/' + paths[1];
}
else
{
path = location.protocol+'//'+location.hostname;
}
// Filemanager config for file and Image browsing and uploading
// If you are running in a subdirectory, ensure to add this here too
config.filebrowserBrowseUrl = path + '/framework/assets/js/ckeditor/plugins/filemanager/index.html';
config.filebrowserImageBrowseUrl = path + '/framework/assets/js/ckeditor/plugins/filemanager/index.html';
};
And here is the code to replace the textareas
CKEDITOR.replace( fulleditor, {
height: 600,
magicline_color: 'red'
} );

setData command is not setting my data to CKEDITOR everytime [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
CKEDITOR.replace('editor1', {
contentsCss: '../assets/global/plugins/bootstrap/css/bootstrap.min.css',
toolbar:
[
{ name: 'document', groups: ['mode', 'document', 'doctools'], items: ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'] },
{ name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', groups: ['find', 'selection', 'spellchecker'], items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt', 'ImageButton'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'] },
'/',
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe', 'ShowBlocks'] }
]
});
MyAjaxMethod('GetDatabyId', IdParam, function (data) {
var dt = data.d;
if (dt!= null) {
$("#foo").html(dt.asd);
$("#foo2").val(dt.asdf);
$("#foo3").val(dt.asdfg);
CKEDITOR.instances.editor1.setData(dt.Detay);
}
else {
alert('no data');
}
});
It needs to get data and set some formtools and finally set CKEDITOR, but it sometimes doesnt set data to CKEDITOR and sometimes does. I tried a simple page with same ajax method and scripts but it didnt work why can it be? I can see all data incoming, json is fine. I tried to send to CKEDITOR's html and inserthtml that also didnt work. I thought it tries to set before it replace CKEDITOR feautures, but i couldnt do anything about it.
Edit: How can i fix that problem? (clarifying my specific problem)
Edit2: Thanks to ojovirtual and torun found problem, it was being sure of that instance is ready before setting data.

You should use setData only when the instance is ready. It works only sometimes because when you call setData the CKEDITOR is not fully initialized sometimes and some others it is.
There is a event called instanceReady that you can use to set the data:
CKEDITOR.on("instanceReady", function(event)
{
CKEDITOR.instances.editor1.setData(dt.Detay);
});
CKEDITOR docs

You should try, create the function for preparation part, try to run before setData.
function prepCkeditor()
{
CKEDITOR.replace('editor1', {
contentsCss: '../assets/global/plugins/bootstrap/css/bootstrap.min.css',
toolbar:
[
{ name: 'document', groups: ['mode', 'document', 'doctools'], items: ['Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'] },
{ name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', groups: ['find', 'selection', 'spellchecker'], items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt', 'ImageButton'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'] },
'/',
{ name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe', 'ShowBlocks'] }
]
});
}
You have to be sure it works before the above code.
prepCkeditor();
CKEDITOR.instances.editor1.setData(dt.Detay);

CKEDITOR.replace( 'editor1', 'editor2', {

http://gw.ablueman.co.uk/tabbednotepad.php
I have 3 ckeditor textareas, all three are the same but fairly different from the main one or the class.
If I put 3 replaces, it works fine. however if I try to use CKEDITOR.replace( 'editor1', 'editor2', 'editor3' {
It works, replacing them, but ignores anything after the { almost like the class.
Am I just formatting CKEDITOR.replace( 'editor1', 'editor2', {}); incorrectly, I need all three to use the same replace.
Heres the code:
<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea class="ckeditor" id="editor3" name="editor3" rows="200"><?php echo $editor3;?></textarea>
<input id="tabtitle1" name="tabtitle1" size="30" placeholder="Tab Title.." />
<input type="submit" value="Submit" >
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
height: '600px',
enterMode: CKEDITOR.ENTER_BR,
toolbar:
[ { name: 'document', groups: [ 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] }, '/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Iframe', 'Syntaxhighlight' ] }, '/',
{ name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'others', groups: [ 'mode' ], items: [ 'Source', 'searchCode', 'autoFormat', 'CommentSelectedRange', 'UncommentSelectedRange', 'AutoComplete', '-', 'ShowBlocks' ] },
{ name: 'tools', items: [ 'Maximize' ] },
]});
</script>
[EDIT] Just FYI, I tried CKEDITOR.replace( ['editor1', 'editor2'],
this didnt work either.

Ckeditor 4 allows you to replace multiple textareas with editors based on classname:
CKEDITOR.replaceAll('className');
docs

You can use an array of textarea id an call a CKEDITOR.replace with jquery and foreach. For example:
var areas = Array('editor1', 'editor2', 'editor3');
$.each(areas, function (i, area) {
CKEDITOR.replace(area, {
customConfig: '/Scripts/ckeditor/config.mini.js'
});
});

You can't call CKEDITOR.replace with several ids at the same time.
Its definition states that the first parameter is the ID or the element and the second one the configuration options.

CKEditor inline rearrange auto-generated toolbar

I have an inline content editor by using the contenteditable attribute.
What I want is to rearrange the default auto-generated toolbar.
The usual method is to create something like:
config.toolbar = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
'/',
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], 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' ] },
{ name: 'others', items: [ '-' ] },
];
in the config.js.
The problem is that I don't know where to find the already auto-generated toolbar so as to change it the way I want. So I don't know what are the names used in the toolbar and therefore I can't make it how I want.
(the code used above is not the one I want obviously..)
Thanks in advance!

Have you seen the Setting Configuration guide? You can either set toolbar in the config.js file which will be loaded while initializing editor or directly in CKEDITOR.inline, but to use this method you need to disable automatic editors creation:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editable', {
toolbar: [ ... ]
} );
If you don't know button names, then check out this question: What toolbar buttons are available in CKEditor 4?
Note: instead of rearranging entire toolbar, you can just rearrange groups of buttons – read more in the Toolbar Customization guide.

CKeditor Toolbar : AddButton (3.6)

I want to add a custom button to the toolbar.
Based on the information here : http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar I have this config.js :
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ 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: ['customImage', '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.extraPlugins = 'customImage';
But the toolbar is not changed. It stays as default.

if you want to add some button to ckeditor, you have to do 3 steps:
Write your own plugin for the button some thing like this:
(function () {
// function when you click button
var a = {
exec: function (editor) {
action when click button
}
},
b = 'videomanager';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton('videomanager', {
label: 'Video Manager',
icon: this.path + 'videomanager.png',
command: b
});
}
});
})();
Register your plugin in ckeditor config.
Add to toolbar
Sorry, i can't format my code