Question

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

案例1：当所选标签的内容为纯文本时。它工作正常。情况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标签。请尝试以下方法：

使用带有类名＆＃34; ckContainer＆＃34;的div标签环绕所有可编辑区域。然后使用此类名称在父div中初始化CKeditor。我已经对它进行了测试，但它确实有效。

此致，Andreas。

＆＃13;

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

＆＃13;

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

＆＃13;

使用CKEditor进行内联编辑

1 个答案: