cke編輯器插入&ZeroWidthSpace佔位字符的問題記錄

背景

本博文主要記錄在使用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事件，做了個判斷！！！這並不是一個非常好的方法，但是能解決我的問題。 如果你有更好的方法 請給我留言。謝謝！