Inline CKEditor with toolbar on generated code

Question

I'm building a backend for a cms at the moment. I've been asked to create a module that generates different blocks to quickly make a page (picture with text below, picture with text to right etc.)

That bit is working but for editing the text I'm trying to use ckeditor. Using the follwing code the text is editable but I'm not getting a toolbar :

<div id="editable" contenteditable="true">
    <h4>{{title}}</h4>
    {{text}}
</div>

To try and solve this I tried using the javascript from CKEditor's guide :

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable' );

This code is just creating an error :

Uncaught TypeError: Cannot call method 'getEditor' of undefined 

I suppose it's because before the text has been generated the editor has nothing to link to.

Can anyone please help me to make the generated code editable with a toolbar? Also, is it possible to get ckeditor working with class names instead of IDs?

Thanks in advance

Answer 1

During the initialization phase CKEditor checks whether there's an editor instance already bound to the element. The error you get suggests that you're providing an id of the element that hasn't been yet attached to DOM or it was removed from DOM before inline() is called.

Make sure that the order is correct:

<div id="editable" contenteditable="true">
    <h4>{{title}}</h4>
    {{text}}
</div>

<script>
   CKEDITOR.disableAutoInline = true;
   CKEDITOR.inline( 'editable' );
</script>

Is <div id="editable" contenteditable="true">...</div> generated by JavaScript? If so, make sure that inline() is called after the element is injected into DOM.

"Last hope" suggestion: Do you call inline() from different DOM scope (i.e. iframe window)?

Answer 2

Thanks for the answer oleq.

Yes, the problem was that the content was being inserted after ckeditor was loaded. I also had a problem with Google Chrome greying out the toolbar.

To solve both problems I used the following code after inserting new content :

$('.editable').click(function() {
    var name;
    for(name in CKEDITOR.instances) {
        var instance = CKEDITOR.instances[name];
        if(this && this == instance.element.$) {
            return;
        }
    }
    $(this).attr('contenteditable', true);
    CKEDITOR.inline(this);
});