CKEditor 内联编辑：如何通过单击按钮启用和禁用它

Question

我的页面中有 CKEditor，我想在 InlineEditing 模式下在一些 DIVs 上使用它，我在其上动态设置了 contenteditable='true' 属性。

对于每个可编辑的 DIV，我都有一个按钮，可以将其从 contenteditable 切换到 'true' 和 'false'，以启用或禁用编辑

按照official documentation，首先我设置这个：

CKEDITOR.disableAutoInline = true;

然后，我设置每个 DIV 的可编辑性：

$('.toggle-edit').click(function(e){ 
  var editedDiv = '#' + $(this).data('editTarget');

  if( $(editedDiv).attr('contenteditable') == 'true' )
  {
    $(editedDiv).attr('contenteditable','false');
    $(this).text('Start Editing');
  }
  else
  {
    $(editedDiv).attr('contenteditable','true');
    $(editedDiv).ckeditor();
    $(this).text('Finish Editing');
  }
});

这会运行，但是当我设置 contenteditable='false' 再次单击按钮时，DIV 不再可编辑，但单击它，将继续启动 CKEditor（我认为在 只读模式）。

如何以更简单的方式避免这种情况？那么，不仅要切换可编辑性，还要切换 CKEditor 激活？

---

更新： 我尝试采用this past answer 采用的解决方案，编写以下代码：

$('.toggle-edit').click(function(e){ 
  var id_editedDiv = $(this).data('editTarget');
  var editedDiv = '#' + id_editedDiv;

  if( $(editedDiv).attr('contenteditable') == 'true' )
  {
    $(editedDiv).attr('contenteditable','false');
    CKEDITOR.instances.id_editedDiv.destroy();
    $(this).text('Start Editing');
  }
  else
  {
    $(editedDiv).attr('contenteditable','true');
    CKEDITOR.inline( id_editedDiv );
    $(this).text('Finish Editing');
  }
});

但是，再一次，什么也没发生。 CKeditor 是通过单击.toggle-edit 按钮创建的，但是当contenteditable 再次设置为false 时它不会被销毁（并且它以只读模式打开）。

Answer 1

我只是在处理一个类似的问题，这对我有用（将我的修复应用于您的代码）：

var editor;

CKEDITOR.on('instanceReady', function(ev) {
    editor = ev.editor;
    // you can also add more config for this instance of CKE here
    // e.g. editor.setReadOnly(false);
});

$('.toggle-edit').click(function(e){ 
    var id_editedDiv = $(this).data('editTarget');
    var editedDiv = '#' + id_editedDiv;

    if($(editedDiv).attr('contenteditable') === 'true'){
        $(editedDiv).attr('contenteditable','false');
        editor.destroy();
        $(this).text('Start Editing');
    }
    else {
        $(editedDiv).attr('contenteditable','true');
        CKEDITOR.inline(id_editedDiv);
        $(this).text('Finish Editing');
    }
});

如果您有多个活动的 CKE 实例，您显然应该调整它，但您应该明白这一点！