使用CKEditor进行内联编辑

Inline editing with CKEditor

本文关键字：编辑 CKEditor 使用      更新时间：2023-09-26

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

情况1：当所选标签的内容为纯文本时。它运行良好。情况2：当所选标签的内容包含更多像<strong>、<b>这样的标签时。CKEditor工具栏不会出现，有时所有的html都会崩溃。

请点击此处查看行为（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));
        });
    });

我认为内联编辑器只允许带有div或textarea标记。尝试以下操作：

用类名为"ckContainer"的div标记包围所有可编辑区域。然后用这个类名在父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>

相关文章：