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

时间:2015-02-24 22:25:57

标签: jquery ckeditor contenteditable inline-editing

我的页面中有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时,它不会被销毁(并且它以只读模式打开)。

1 个答案:

答案 0 :(得分:2)

我正在研究一个类似的问题,这对我有用(将我的修复程序应用到您的代码中):

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实例,您应该明确调整它,但您应该明白这一点!