CKEditor移動的問題

ckeditor jquery

小魚 2018-11-12 16:39:16 ‧ 2594 瀏覽

分享至

不好意思打擾一下,
小弟有一個問題,
最近在用CKEditor作為編輯器,
因為企劃希望能夠在點擊的時候能夠換位置,
我用以下程式碼確實可以換位置

//換位置
var $div1 = $("#editData");
var $add1 = $("#title" + i);
$div1.insertAfter($add1);
$div1.show();
$add1.hide();

但是位置改變之後,
CKEditor就不能用了,
內容載不進去,
也無法編輯,
甚至連上方的 input/text 都不能正常使用,
不知道有沒有大大有類似的經驗可以分享一下如何處理,
錯誤訊息如下

Uncaught TypeError: Cannot read property 'getSelection' of undefined
    at CKEDITOR.dom.selection.getNative (ckeditor.js:458)
    at new CKEDITOR.dom.selection (ckeditor.js:456)
    at a.CKEDITOR.editor.getSelection (ckeditor.js:454)
    at new CKEDITOR.plugins.undo.Image (ckeditor.js:1217)
    at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1212)
    at a.<anonymous> (ckeditor.js:1208)
    at a.n (ckeditor.js:10)
    at a.<anonymous> (ckeditor.js:12)
    at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
    at a.setData (ckeditor.js:285)

Homura iT邦高手 1 級 ‧ 2018-11-12 19:22:57 檢舉

你是用ckeditor4嗎？

小魚 iT邦大師 1 級 ‧ 2018-11-12 19:54:29 檢舉

CKEditor 4.10.1

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2018-11-13 01:20:15

最佳解答

稍微查了一下
目前作法似乎是刪除舊的之後
再把新的重新建立
這是我測試的程式碼

<div id="ct1"></div>
<hr>
<div id="ct2"></div>
<button id="changePos">更換位置</button>
<script>
var changeEditor=(()=>{
    var x=0;
    CKEDITOR.replace('ct'+(x+1));
    return ()=>{
        var srcId='ct'+(x+1);
        x=(x+1)%2;
        var destId='ct'+(x+1);
        
        //暫存資料後，刪除舊 editer
        var data=CKEDITOR.instances[srcId].getData();
        CKEDITOR.instances[srcId].destroy();
        document.getElementById(srcId).innerHTML="";
        
        //建立新的 editer
        CKEDITOR.replace(destId,{
            on:{
                'instanceReady':()=>{
                    CKEDITOR.instances[destId].setData(data);
                }
            }
        });
    }
})();
document.getElementById("changePos").addEventListener("click",(evt)=>{
    changeEditor();
});
</script>