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加载一次并进行缓存，以便始终可以使用。

＆＃13;

// 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');
  }

});

＆＃13;

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

＆＃13;

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

在Element上切换CKEditor

1 个答案: