Geek Answers Handbook

Why does CKEditor add itself to divs where it shouldn't?

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

The problem is that CKEditor continues to add itself to the Bootstrap-WYSIWYG div, although I specifically initialized CKEditor using class="ckeditor"

My code is as follows:

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

The page is at http://cloudadmin-theme.elasticbeanstalk.com/rich_text_editors.html

Try clicking on the tab that says "Bootstrap Editor with Shortcut Keys" where it says "Go ..." . This causes CKEditor onfocus, which is strange!

I'm crazy. Can anyone kindly guide me. What am I doing wrong?

+4
source share
2 answers

CKEDITOR will automatically connect elements that have an attribute by default contenteditable="true". Do you want to disable CKEDITOR inline editing, or you can do this in the global configuration.

CKEDITOR.disableAutoInline = true;

I prefer to do this in the code, rather than in the config, so if someone else uses it, you will not ruin them.

Based on your comment on including CKEDITOR. This is pulled from CKEDITOR 4 docs.

Enable inline editing

Inline editing is included directly in HTML elements through HTML5 contenteditable.

, , . :

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

, CKEDITOR.inline:

<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>
+17

, , ckeditor .

, html :

contenteditable="true"

, /Ckeditor/config.js

CKEDITOR.disableAutoInline = true;

ckeditor , :

CKEDITOR.replace( 'editor1' );

:

CKEDITOR.inline( 'editor1' );
+3

More articles:


All Articles