在元素上切换 CKEditor答案

【问题标题】：Toggle CKEditor on Element在元素上切换 CKEditor
【发布时间】：2016-02-29 18:43:04
【问题描述】：

HTML

<tr>
   <td>1</td>
   <td colspan="3"><p>sometext</p>
   </td>
   <td><button class="mdl-button mdl-js-button mdl-button--raised mdl-   button--colored viewButton" data-upgraded=",MaterialButton">Edit</button>    </td>
</tr>
<tr class="hide" style="display: table-row;">
    <td rowspan="4">1</td>
    <td rowspan="4">
        <textarea rows="8" cols="50" name="details" class="ckeditor" style="visibility: hidden; display: none;">
                        sometext
        </textarea>
    </td>
</tr>

JAVASCRIPT

$('textarea').toggleClass("ckeditor");
$('button.viewButton').click(function(){
    var t=$(this).parent().parent().next();
    $(this).parent().parent().next().toggle();
    $(t > 'td' >'textarea').toggleClass("ckeditor");
});

当我点击编辑时，下一行可见。
我的问题是在单击编辑时加载 CKEditor。
因为我的页面有 CKEditor，所以初始化需要太多时间。

首先，我正在切换所有正在工作的 CKEditor 时间减少了，但我想要在 Textarea 上编辑和删除 CKEditor 的完美解决方案。

【问题讨论】：

标签： javascript jquery ckeditor editor toggle

【解决方案1】：

我实现了一个动态 ckeditor 来显示用户何时单击编辑按钮，但我想在 textarea 焦点上显示编辑器并在失去焦点时将其移除可能是个好主意。

为了提高性能，CKEditor 加载一次并被缓存，因此它始终可供使用。

// click the edit button to toogle views
$('#edit').on('click', function() {

  // if there is an existing instance of this editor
  if (CKEDITOR.instances.txt_area) {
    /* destroying instance */
    CKEDITOR.instances.txt_area.destroy();
  } else {
    /* re-creating instance */
    CKEDITOR.replace('txt_area');
  }

});

<button id="edit">Edit</button>
<br/>
<textarea id="txt_area" rows="10" style="width:100%;">
  Click edit to editor this textarea using ckeditor
</textarea>

JSFiddle：https://jsfiddle.net/bmatovu/610e90zz/

【讨论】：