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

ckeditor, javascript, jquery, twitter-bootstrap-3

Solution

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>

Problem

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?

Original source