背景
本博文主要記錄在使用cke編輯器時，遇到的一系列的問題
問題1：在執行某些業務操作後，編輯器會偶現在頁面頭部或者尾部插入&ZeroWidthSpace佔位符（編輯器好像就愛幹這事~）
解決方法：在業務操作後對html的孩子節點進行遍歷，過濾掉特殊字元
removeBodyZeroWidthSpace() {
// 【偶現編輯器莫名在body前加入&ZeroWidthSpace佔位字元】
try {
let htmlChildrenNodes = document.getElementsByTagName('html')[0].childNodes;
let nodeLen = htmlChildrenNodes.length;
for (let i = 0; i < nodeLen; i++) {
let text = htmlChildrenNodes[i];
if (text.nodeType && text.nodeType === 3) {
text.textContent = text.textContent.replace(/[\u200B-\u200D\uFEFF]/g, '');
}
}
} catch (e) {
console.log(e)
}
}
問題2: 非手打插入文字後，如何恢復游標？（離開游標又恢復游標）
解決方法：使用cke內部記錄游標的方法createBookmarks2和selectBookmarks，在插入文字後，再重新建立恢復
try {
var $selection = this.getSelection(); //當前選中區域
self.$nextTick(() => {
var $bookmarks = $selection && $selection.createBookmarks2(true); //當前游標
var html = unit.editor.element.$.innerHTML;
if (html) {
unit.editor.element.$.innerHTML = html.replace(/[\u200B-\u200D\uFEFF]/g, '');
}
this.getSelection().selectBookmarks($bookmarks);
})
} catch (e) {
console.log('no range');
}
問題3: 如何禁止刪除指定的文字？如圖所示，包括【空】的按鈕是不可以使用delete鍵 和 Backspace鍵進行刪除的。
3.1 只要在滑鼠的keydown事件裡判斷有沒有這個元素，有的話禁止
if ((e.code === 'Backspace' || e.code === 'Delete')) {
try {
// 獲取選中的html
let cloneContents = window.getSelection().getRangeAt(0).cloneContents();
let container = window.document.createElement('div');
container.appendChild(cloneContents);
let html = container.innerHTML;
if (html.includes('hollow-item')) { // hollow-item是空的類名
console.log("forbit delete");
sessionStorage.ckeEditNokeyDown = true;
e.stopPropagation();
e.preventDefault();
return false;
}
} catch (e) {
console.log(e)
}
}
3.2 sessionStorage.ckeEditNokeyDown = true是幹嘛的？
從上面的程式碼可以看出，有一行sessionStorage.ckeEditNokeyDown = true這是因為我們在元素上繫結的keydown事件執行了並阻止了預設事件之後，並沒有阻止成功，還是會到編輯器裡的keydown中。由於我們是本地引入editor.js的，所以我直接加了個sessionStorage的變數，然後editor的原始碼中找到對應的keydown事件，做了個判斷！！！這並不是一個非常好的方法，但是能解決我的問題。 如果你有更好的方法 請給我留言。謝謝！
