CKEditor自定义工具栏配置

Question

I've looked through several questions in this forum and the CKEditor site about this topic, but nothing's helped so far. First of all, I'm running CKEditor 4.3.2 on a SharePoint 2010 site, using inline editors within a jQuery UI modal dialog. Adding CKEditor to the dialog was painless, but I can't say the same for setting up a slimmer toolbar. Here's what I've done so far:

1. slimConfig.js

    CKEDITOR.editorConfig = function(config) { config.toolbar = [ {name: "basicstyles", items: ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]}, {name: "paragraph", items: ["NumberedList", "BulletedList"]} ]; } 

2. Source JavaScript

    setToolbar("notes"); setToolbar("access"); //. . .[several other fields]. . . function setToolbar(divName) { CKEDITOR.replace(divName, {customConfig: "/customConfigs/slimConfig.js"}); } 

Additionally, I've set up the target fields as divs using contenteditable set to true, like this:

<div id="notes" contenteditable="true"></div>

The script seems to run well until it hits an exception on ckeditor.js line 308, where the error text is "The editor instance is already attached to the provided element." After a few more steps, it returns to the same area on line 308, at which point I get a terminal exception with the message, "Exception thrown and not caught."

I believe I have everything set up properly right now, but don't know what to make of this error. Does anyone have experience with getting customized toolbars set up?

Answer 1

By default CKEditor replaces all elements of contenteditable="true" with inline editors. So when you try to replace it once again, it will throw an error because it doesn't make sense.

If you want to take a full control over your editors, set CKEDITOR.disableAutoInline to false and take care of all instances manually. Of course, you can always find your instance in CKEDITOR.instances object and call editor.destroy() if you want to.

See http://docs.ckeditor.com/#!/guide/dev_inline