|
I'm having some trouble adding toolbar options to the CKEditor4 inline toolbar option. I've been reading the docs and still can't figure out where my problem is.
I'm creating a div on the fly, then adding the CKEditor to the div. Everything works fine, but I want to remove some of the tool bar options and add some other ones. When I add parameters to the inline() call nothing changes?
.on('dblclick', function(e){
e.preventDefault();
e.stopPropagation();
ed.ck_restore();
ed.ck_active_block = $(this).attr("id");
ed.ck_block_data = $(this).html();
var block_width = $(this).css("width");
var block_height = $(this).css("height")+20;
var block_padding_top = $(this).css("padding-top");
var block_padding_right = $(this).css("padding-right");
var block_padding_bottom = $(this).css("padding-bottom");
var block_padding_left = $(this).css("padding-left");
var padding = 'padding-top: '+block_padding_top+';padding-right: '+block_padding_right+';padding-bottom: '+block_padding_bottom+';padding-left: '+block_padding_left+';';
var editor = '<div id="edit" contenteditable="true" style="margin-top: -'+block_padding_top+'; margin-left: -'+block_padding_left+';'+padding+' width: '+block_width+'; height: '+block_height+';background-color: #fff;position: absolute;">'+ed.ck_block_data+'</div>';
$("#"+ed.ck_active_block).prepend(editor);
if(CKEDITOR.instances.edit)
{
CKEDITOR.instances.edit.destroy(); //remove any previously created instances
}
CKEDITOR.inline("edit",
[CKEDITOR.config.fontSize_style = {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [ {
element: 'font', attributes: { 'size': null }
}]
}]
);
$("#edit").click(function(e){e.stopPropagation();}).focus();
$("w_save").text("1");
});
I"m trying to call the function like this:
CKEDITOR.inline("edit",
[CKEDITOR.config.fontSize_style = {
element: \'span\',
styles: { \'font-size\': \'#(size)\' },
overrides: [ {
element: \'font\', attributes: { \'size\': null }
}]
}]
);
The docs imply I can pass a configuration parameter to change the options, but I'm missing something and after 3 hours of trying I need a bit of help.
Any help is appreciated.
Thanks.
|
Try this!?
Take a look at this example: http://nightly.ckeditor.com/13-01-30-08-51/standard/samples/inlineall.html
Based on this example I have made a newsletter with different inline toolbars based on attributes of the div's, e.g. 3 different toolbars in this example (full editor accept when attribute is class='link' or id='dateline'):
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor,element = editor.element;
if ( element.getAttribute( 'class' ) == 'link' || element.getAttribute( 'id' ) == 'dateline') {
editor.on( 'configLoaded', function() {
if (element.getAttribute( 'class' ) == 'link') {
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
'forms,iframe,newpage,removeformat,' +
'smiley,specialchar,stylescombo,templates,table,tabletools,pagebreak,horizontalrule';
editor.config.toolbarGroups = [
{ name: 'editing', groups: [ 'links' ] },
{ name: 'undo' },
{ name: 'about' }
];
}
else if (element.getAttribute( 'id' ) == 'dateline') {
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
'forms,iframe,newpage,removeformat,' +
'smiley,specialchar,stylescombo,templates,table,tabletools,pagebreak,horizontalrule';
editor.config.toolbarGroups = [
{ name: 'basicstyles' },
{ name: 'undo' },
{ name: 'about' }
];
}
});
}
else
{
editor.config.removePlugins = 'forms,iframe,newpage,removeformat,specialchar,stylescombo,templates';
}
});