javascript - Inline CKEditor with toolbar on generated code - Stack Overflow

admin管理员组

文章数量:1426403

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

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

• javascript
• jquery
• ckeditor

Share Improve this question Follow asked Jun 29, 2013 at 10:02 xonorageousxonorageous 2,28177 gold badges2626 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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)?

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);
});

本文标签： javascriptInline CKEditor with toolbar on generated codeStack Overflow