在元素上切换CKEditor

Question

的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的完美解决方案。

Answer 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/