Question

我的页面中有CKEditor，我想在 InlineEditing 模式下使用它，在DIVs上，我将{i}设置为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');
  }
});

但是，再一次，没有任何反应。单击.toggle-edit按钮创建CKeditor，但当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实例，您应该明确调整它，但您应该明白这一点！

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

1 个答案: