Inline editing with CKEditor

Question

I am using CKEditor to enable inline editing data. It works fine when I use contenteditable directly in the html tag. But when I click on any tag on the document, I enable inline editing explicitly, by adding a attribute contenteditable dynamically in JavaScript and then calling the method CKEDITOR.inline('id'), on the clicked tag. It gives unexpected behavior in some cases.

Case 1: When the content of selected tag is plain text. It works fine. Case 2: When the content of selected tag contains more tags like <strong>, <b>. The CKEditor toolbar doesn't appear and sometimes all the html gets crashed.

Please click here to view the behavior (JSFiddle)

Html Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<div>
    <p> This is the the paragraph with out any other tag. </p>
    <p> This is the the paragraph with a link tag <a href="#">link</a> </p>
    <p> This is the the paragraph with a bold tag <b>bold</b> </p>
</div>

JavaScript Code

$(document).ready(function(e){
        $(document).click(function(event){
            console.log("clicked: " + event.currentTarget);
          // event.target is the clicked object
            var view = $(event.target);


            var uniqueIdforCurrentElement =  randomString(32).trim();
            if(view.attr('id') === undefined || view.attr('id') === ''){
                view.attr('id', uniqueIdforCurrentElement);
            } else {
                uniqueIdforCurrentElement = view.attr('id');
            }
            var editor = CKEDITOR.instances[uniqueIdforCurrentElement];
            // console.log(uniqueIdforCurrentElement, editor);
            if (editor) {
                editor.destroy(true);
            } 
            view.attr('contenteditable', true);
            CKEDITOR.disableAutoInline = true;
            CKEDITOR.inline(view.get(0));
        });
    });

rottaca rottaca · Accepted Answer · 2015-11-11T10:52:54

I think the inline editor is only allowed with a div or a textarea tag. Try the following:

Surround all editable areas with a div tag with class name "ckContainer". Then init the CKeditor in the parent div with this class name. I've tested it and it works.

Regards, Andreas.

$(document).ready(function(e) {
  $(document).click(function(event) {
    console.log("clicked: " + event.currentTarget);
    // event.target is the clicked object
    var view = $(event.target);
    var viewParentDiv = view.parent(".ckContainer");


    var uniqueIdforCurrentElement = Math.random().toString();
    if (viewParentDiv.attr('id') === undefined || viewParentDiv.attr('id') === '') {
      viewParentDiv.attr('id', uniqueIdforCurrentElement);
    } else {
      uniqueIdforCurrentElement = view.attr('id');
    }
    var editor = CKEDITOR.instances[uniqueIdforCurrentElement];
    // console.log(uniqueIdforCurrentElement, editor);
    if (editor) {
      editor.destroy(true);
    }
    viewParentDiv.attr('contenteditable', true);
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline(viewParentDiv.get(0));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
<div>
<div class="ckContainer"><p> This is the the paragraph with out any other tag. </p></div>
<div class="ckContainer"><p> This is the the paragraph with a link tag <a href="#">link</a> </p></div>
<div class="ckContainer"><p> This is the the paragraph with a bold tag <b>bold</b> </p></div>
</div>

Inline editing with CKEditor

1 Answers