Why is CKEditor adding itself to divs where it is not supposed to?

Question

I've a page where I've initialized Bootstrap-WYSIWYG and CKEditor together.

The problem is CKEditor keeps adding itself to Bootstrap-WYSIWYG div even though I've specifically initialized CKEditor using class="ckeditor"

My code is as follows:

<textarea class="ckeditor" name="editor1"></textarea>

The page can be found at http://cloudadmin-theme.elasticbeanstalk.com/rich_text_editors.html

Try clicking on the tab that says "Bootstrap Editor with Keyboard Shortcuts" where it's written "Go ahead...". This brings up CKEditor onfocus, which is weird!

I'm at my wits end. Can someone kindly guide me. What am I doing wrong?

Answer 1

CKEDITOR by default will auto hook up elements that have the contenteditable="true" attribute. You want to turn off the CKEDITOR's auto inline editing or it can be done in the global config.

CKEDITOR.disableAutoInline = true;

I prefer to do it in code and not in the config so if anyone else uses it, you do not screw them up.

---

Based on your comment on enabling CKEDITOR This is pulled from the CKEDITOR 4 docs

Enabling Inline Editing

Inline Editing is enabled directly on HTML elements through the HTML5 contenteditable attribute.

Suppose, for example, that you want to make a element editable. In order to achieve this, it is enough to do so:

<div id="editable" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The div element that contains this text is now editable.
</div>

It is also possible to enable editing with explicit code, by calling the CKEDITOR.inline method:

<div id="editable" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The div element that contains this text is now editable.
</div>
<script>
    // Turn off automatic editor creation first.
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'editable' );
</script>

Answer 2

What you are experiencing is the ckeditor inline editor mode.

It is automatically instantiated when you have an html element with:

contenteditable="true"

To avoid it you can remove this attribute or you can put in /Ckeditor/config.js file

CKEDITOR.disableAutoInline = true;

To bind ckeditor in standard mode you can use:

CKEDITOR.replace( 'editor1' );

If you want to bind it in inline mode:

CKEDITOR.inline( 'editor1' );