切換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它工作時間減少了它，但我想完美的解決方案，編輯和刪除TexEdrea上的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/