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.
Related
I recently started working with CKEditor, but the toolbar has functions we will not be using.
I tried copying the code from the online toolbar configuration, but the toolbar doesn't change.
my config.js file looks like this:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};
which was copies directly from the configuration tool.
After the above, I tried pasting the code into the initialization function like the following block:
jQuery(function()
{
var editor = CKEDITOR.replace( 'message',
{
extraPlugins : 'stylesheetparser',
extraPlugins : 'filebrowser',
extraPlugins : 'popup',
//contentsCss : '<?= base_url(); ?>css/layout.css',
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
});
CKFinder.setupCKEditor(editor);
});
I also tried simply to show one part of the toolbar like this:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
];
// Toolbar groups configuration.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
];
};
None of the above changed anything in the toolbar, so I am not sure if I overlooked something.
Any help will be appreciated.
Please make sure you properly define your configuration - check the Setting CKEditor Configuration article for some code examples. Some of the mistakes you are doing:
Mixing up config.optionName and optionName.
Declaring extraPlugins multiple times - you should put all extra plugins into one declaration: config.extraPlugins = 'myplugin,anotherplugin';
Also check some of the CKEditor SDK samples for examples - if you open any of them (like this one), scroll down to the "Get Sample Source Code" section and grab the source code to copy.
Last but not least, use the JavaScript console of your browser to check for errors and clear the cache after each change!
And finally, it makes little sense to download a bloated CKEditor package and then remove plugins/buttons in your configuration - better create a custom build in CKBuilder.
include:
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/config.js"></script>
<textarea id="user_message"></textarea>
<script type="text/javascript">
var toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
var initEditor = function() {
return CKEDITOR.replace( 'user_message',{
toolbar : 'Basic',
uiColor : '#9AB8F3',
toolbarGroups,
});
}
initEditor();
</script>
Demo
my CKEditor config.js changes were not reflected in my toolbar until i put matched the same path as the Samples had. ex: the working sample has this path:
ckeditor\samples\index.html
ckeditor\config.js
so i made my working web page app with ckeditor this:
rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php
before, i had ckeditor on the same level as root, but i moved it into root.
of course i had to change the relative path statements, which are now this[and showing the other code that enables the div to show the CKEditor toolbar]:
echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>";
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>";
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>";
i hope this helps someone!
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'
} );
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);
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.
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