Custom Toolbar Configuration

I've looked through several questions in this forum 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", itmes: ["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 <getEditor().name> 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. Can anyone provide some direction?

Fri, 01/24/2014 - 14:53

sebstefanov

Joined: 03/02/2012

Posts: 1329

Not sure. Maybe you need to

Not sure. Maybe you need to destroy previous editor versions before you can load the slimmer one?

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Mon, 01/27/2014 - 18:42

(Reply to #2) #3

AurumPotabile

Joined: 23/01/2014

Posts: 5

I appreciate the assistance!

I appreciate the assistance! Per your suggestion I tried destroy, but had no success. Interestingly, I added CKEDITOR.disableAutoInline = true and have no other CKEDITOR code active, but toolbars still appear when I click inside of the fields with the contenteditable attribute. Should this be happening?

[. . .code that populates #dialog-form. . .]

$("#dialog-form").dialog("open");

CKEDITOR.disableAutoInline = true;

The editable fields are contained within #dialog-form, which is hidden until I click a button. At that point the dialog opens and displays all the fields. Once open, the rich text fields should display the slimmed-down toolbar.

Am I missing something because the fields are located within a div that's hidden until I click the button?

Tue, 01/28/2014 - 02:28

(Reply to #3) #4

AurumPotabile

Joined: 23/01/2014

Posts: 5

Okay, I think I'm a step

Okay, I think I'm a step closer. Here's the code I have that works right now:

[. . . code that populates #dialog-form. . .]
$("#dialog-form").dialog("open");

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline("notes", {
	toolbar: [
		{name: "basicstyles", items: ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]},
		{name: "paragraph", items: ["NumberedList", "BulletedList", "-", "Outdent", "Indent", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"]},
		{name: "links", items: ["Link", "Unlink"]},
		"/",
		{name: "styles", items: ["Styles", "Format", "Font", "FontSize"]},
		{name: "colors", items: ["TextColor", "BGColor"]}
	]
});

This causes the appropriate toolbar to appear within the dialog, but on the first rich text field only. However, I have four other fields that need to contain rich text, and if I add a similar inline block for the next field (like in the following example), I get the exception: "The editor instance \"assess\" is already attached to the provided element."

CKEDITOR.inline("notes", {
	toolbar: [ 
		. . . toolbar config. . .
	]
});
CKEDITOR.inline("assess", {
	toolbar: [
		. . . toolbar config. . .
	]
});

How can I get multiple, separate fields to show the custom toolbar? This is perplexing because the inline demo shows several different fields on the same page and they have different toolbars applied, so I know it's possible.