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

I'm building a backend for a cms at the moment. I've been asked to create a module that gener

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

Share Improve this question asked Jun 29, 2013 at 10:02 xonorageousxonorageous 2,2817 gold badges26 silver badges35 bronze badges
Add a ment  | 

2 Answers 2

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745463044a4628795.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信