内联CKEditor与工具栏生成的代码 [英] Inline CKEditor with toolbar on generated code

问题描述

我正在建立一个后端为cms的时刻。我被要求创建一个模块，生成不同的块，以快速制作一个页面（图片下面的文字，图片文字到正确的等等）

工作，但编辑文本我试图使用ckeditor。使用以下代码文本是可编辑的，但我没有获取工具栏：

 < div id =editablecontenteditable =true> 
< h4> {{title}}< / h4> 
 {{text}} 
< / div> 
  

要尝试和解决这个问题，我尝试使用CKEditor指南中的javascript：

  CKEDITOR.disableAutoInline = true; 
 CKEDITOR.inline（'editable'）; 
  

此代码只是创建一个错误：

 未捕获的TypeError：无法调用未定义的方法'getEditor'
  

我想这是因为在文本生成之前，编辑器没有任何链接。

任何人都可以帮助我使用工具栏编辑生成的代码？

提前感谢

是的，问题是内容是在ckeditor加载后插入的。

为了解决这两个问题，我在插入新内容后使用了以下代码：

  $（'。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）; 
}）; 
  

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

解决方案

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

这篇关于内联CKEditor与工具栏生成的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！