使用 CKEditor 进行内联编辑

Question

我正在使用 CKEditor 启用内联编辑数据。当我直接在 html 标签中使用 contenteditable 时它工作正常。但是当我点击文档上的任何标签时，我通过在 JavaScript 中动态添加一个属性 contenteditable 然后调用方法 CKEDITOR.inline('id') 来显式启用内联编辑标签。它在某些情况下会产生意想不到的行为。

情况一：选中标签内容为纯文本时。它工作正常。情况2：当所选标签的内容包含更多标签时，例如<strong>，<b>。 CKEditor 工具栏不出现，有时所有 html 都会崩溃。

Please click here to view the behavior (JSFiddle)

Html代码：

<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代码

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

Answer 1

我认为内联编辑器只允许使用 div 或 textarea 标签。尝试以下操作：

用 div 标签和 class 名称 "ckContainer" 包围所有可编辑区域。然后使用此 class 名称在父 div 中初始化 CKeditor。我已经测试过了，它有效。

此致，安德烈亚斯。

$(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>

使用 CKEditor 进行内联编辑

Inline editing with CKEditor

html

javascript

jquery

inline-editing

ckeditor