手把手實現富文字編輯器

發表於2015-10-15

前言

最近嘗試去寫一個富文字編輯器，覺得應該也不難，但沒想到還是花了不少時間去寫前期的主要邏輯，其間太多的邊角邏輯是沒有考慮到的。原因是前期走了很多彎路，單純的一點一點的去實現功能，有分支功能出現就一點一點的修補，到最後發現程式碼量很多，邏輯很複雜。最後痛下決心，靜下心來分析了一下，思考用理論邏輯去鋪墊根基，才算是構建了一個還算滿意的基礎邏輯。真心覺得，理論才是一切事情的開始點，縝密的理論邏輯才能建造基乎無bug的程式碼。

前面的都是些廢話，由於該文字編器實現了execCommaond的部分方法，下面的內容相對比較複雜，對實現不感興趣的可以忽略，如果是妹子可以直接聯絡筆者交流交流

功能

富文字編輯器實現如下的功能

實現fake原生execCommand的能力
修改style的能力

其實很多能力，原生的execCommand已經幫我們做好了，但我們的編輯器要有與execCommand相同的能力，以備原生無法實現的時候，我們的編輯器還是可以實現。

API能力

標籤插入與刪除
style修改

便籤的修改能力
比如一段程式碼

<div>abcd</div>

1	<div>abcd</div>

如果abc被選中之後，執行execCommand之後的程式碼是在abc外包裹一個strong標籤
變成

<div><strong>abc</strong>d</div>

1	<div><strong>abc</strong>d</div>

如果b再次選中執行execCommand(‘bold’)命令後，會變成

<div><strong>a</strong>b<strong>c</strong></div>

1	<div><strong>a</strong>b<strong>c</strong></div>

可以看到原來的strong被分離了，變成單獨的兩個，還有一些更復雜的情況，如下

<div><strong>ab<u><strong>cd<u>b<span><strong>pp</strong></span></u><strong></u></strong></div>

1	<div><strong>ab<u><strong>cd<u>b<span><strong>pp</strong></span></u><strong></u></strong></div>

像這個串，如果沒有良好的理論基礎與抽象建模，靠手動的程式碼去處理基乎是不可能的。

第一步

串的正則化

如上那個複雜的串，其樹結構如下
最上面的是根結點，葉子結點都是文字節點(textNode)

我們可以看到規律

葉子結點向上回溯的過程中，通過的結點會給我們賦予不同的功能，但我們要操作的節點，如果像strong、underline一定程度是與樣式有關的，我們把它們稱為樣式結點
如果我們直接刪掉葉子結點最近的祖先中的樣式結點，很有可能會影響到其他的葉子結點，這時候我們就要把樣式結點的影響最小化，就要先進行正則處理

正則化的過程就是要把樣式結點轉化到葉子結點的上面，每個樣式結點只控制一個我們想要直接操作的葉子結點
如下的轉化過程

正則化的過程的同時，我們還要修剪一些無用的結點，比如空的span結點，比如空的textNode，轉化完了之後的樹，我們處理起來變得很簡單

正則化的實現也很簡單，從ROOT結點進行中序遍歷的演算法，即先訪問根結點，再從左向右依次訪問子結點，然後一直到葉子結點，找出葉子結點的樣式結點次續，並刪除經過的樣式結點，然後把它們插入到每個葉子結點的上面

   var scan = function(node, inhrintStyles){
        // 已經是葉子節點了
        if(node.nodeType === node.TEXT_NODE){

            if(inhrintStyles.length){
                    leafNodes.push({
                         inhrintStyles: inhrintStyles.concat([]),
                         node: node
                    });
                }
             // 非葉子節點
           }else{
                // 如果是style節點
                // 標記這是要刪除的style節點，
                if(styleTagNames.indexOf(node.tagName.toLowerCase()) > -1){
                    // inhrintStyles存在此style 不重複增加
                    var exists = 0;
                    for(var i = 0; i < inhrintStyles.length; i ++){
                        if(inhrintStyles[i].tagName === node.tagName){
                            exists = 1;
                            break;
                        }
                    }
                if(! exists){
                    inhrintStyles = inhrintStyles.concat(node);
                 }
                  styleNodes.push(node);
                }

          for(var i = 0; i < node.childNodes.length; i ++){
                 scan(node.childNodes[i], inhrintStyles);
              }

          }
      };

  scan(tree, []);

var scan = function(node, inhrintStyles){

// 已經是葉子節點了

if(node.nodeType === node.TEXT_NODE){

if(inhrintStyles.length){

leafNodes.push({

inhrintStyles: inhrintStyles.concat([]),

node: node

});

}

// 非葉子節點

}else{

// 如果是style節點

// 標記這是要刪除的style節點，

if(styleTagNames.indexOf(node.tagName.toLowerCase()) > -1){

// inhrintStyles存在此style 不重複增加

var exists = 0;

for(var i = 0; i < inhrintStyles.length; i ++){

if(inhrintStyles[i].tagName === node.tagName){

exists = 1;

break;

}

if(! exists){

inhrintStyles = inhrintStyles.concat(node);

}

styleNodes.push(node);

}

for(var i = 0; i < node.childNodes.length; i ++){

scan(node.childNodes[i], inhrintStyles);

}

};

scan(tree, []);

如下程式碼實現刪除樣式結點的過程

  // 刪除樣式節點
            for(var i = 0; i < styleNodes.length; i ++){
                var styleNode = styleNodes[i];

                var childNodes = styleNode.childNodes;

                var fragment = document.createDocumentFragment();
                var child;
                while(child = childNodes[0]){
                    fragment.appendChild(child);
                }

                styleNode.parentNode.replaceChild(fragment, styleNode);
            }

// 刪除樣式節點

for(var i = 0; i < styleNodes.length; i ++){

var styleNode = styleNodes[i];

var childNodes = styleNode.childNodes;

var fragment = document.createDocumentFragment();

var child;

while(child = childNodes[0]){

fragment.appendChild(child);

}

styleNode.parentNode.replaceChild(fragment, styleNode);

}

經過這樣處理後的樹，沒有了任何樣式結點，這也是去除樣式的一個方法
下面的程式碼展示將樣式結點最小化到textNode之上的程式碼

 // 對葉子結點進行樣式插入
            for(var i = 0; i < leafNodes.length; i ++){
                var leafNode = leafNodes[i];

                if(leafNode.node.nodeValue === ""){
                    leafNode.node.parentNode.removeChild(leafNode.node);
                    continue;
                }

                var node;
                var styleNode;
                var frag = document.createDocumentFragment();
                var currParent = frag;
                while(styleNode = leafNode.inhrintStyles.shift()){
                    // 去除無用atribute屬性
                    if(! donotTrimSpan && styleAttrTagNames.indexOf(styleNode.tagName.toLowerCase()) > - 1 && ! styleNode.attributes.length){
                    }else{
                        el = styleNode.cloneNode();

                        currParent.appendChild(el);

                        currParent = el;
                    }
                }

                var leafNodeParent = leafNode.node.parentNode;
                var tempNode = document.createElement("span");
                leafNodeParent.replaceChild(tempNode, leafNode.node);

                currParent.appendChild(leafNode.node);

                leafNodeParent.replaceChild(frag, tempNode);
            }

// 對葉子結點進行樣式插入

for(var i = 0; i < leafNodes.length; i ++){

var leafNode = leafNodes[i];

if(leafNode.node.nodeValue === ""){

leafNode.node.parentNode.removeChild(leafNode.node);

continue;

}

var node;

var styleNode;

var frag = document.createDocumentFragment();

var currParent = frag;

while(styleNode = leafNode.inhrintStyles.shift()){

// 去除無用atribute屬性

if(! donotTrimSpan && styleAttrTagNames.indexOf(styleNode.tagName.toLowerCase()) > - 1 && ! styleNode.attributes.length){

}else{

el = styleNode.cloneNode();

currParent.appendChild(el);

currParent = el;

}

var leafNodeParent = leafNode.node.parentNode;

var tempNode = document.createElement("span");

leafNodeParent.replaceChild(tempNode, leafNode.node);

currParent.appendChild(leafNode.node);

leafNodeParent.replaceChild(frag, tempNode);

}

經過了這一輪的正則化處理之後，我們主要做了以下三件事情

最小化樣式結點到文字結點上
去除無用的結點
去除重複的結點

其實這一輪正則化之後理應要再進行更多的優化，比如

合併結點

正則化完成之後使我們修減樣式結點變得容易很多了，為了實現execCommand的功能，我們要實現樹的如下兩個方法
葉子結點某個樣式結點的刪除
葉子結點某個樣式結點的增加

增加的實現

先向上檢查是否有該樣式結點存在，如果有了就不進行新增了，如果沒有，要進行新增
新增的實現了很簡單

       setNodesUnderLabel: function(selectedNodes, labelName){
            selectedNodes.map(function(item){
                var p = item.parentNode;

                var hasLabel = 0;
                do{
                    if(p.childNodes.length > 1){
                        break;
                    }

                    if(p.tagName.toLowerCase() === labelName){
                        hasLabel = 1;
                        break;
                    }
                }while(p = p.parentNode);

                if(hasLabel){
                }else{
                    var label = document.createElement(labelName);

                    item.parentNode.replaceChild(label, item);

                    label.appendChild(item);
                }
            });
        },

setNodesUnderLabel: function(selectedNodes, labelName){

selectedNodes.map(function(item){

var p = item.parentNode;

var hasLabel = 0;

do{

if(p.childNodes.length > 1){

break;

}

if(p.tagName.toLowerCase() === labelName){

hasLabel = 1;

break;

}

}while(p = p.parentNode);

if(hasLabel){

}else{

var label = document.createElement(labelName);

item.parentNode.replaceChild(label, item);

label.appendChild(item);

}

});

刪除的實現也是如此，先向上檢查是否有label存在，有的話才刪除

樹的抽象功能已經建成，但後面提取最選中的葉子結點也並非一件容易的事情，主要是瀏覽器提供的API坑點太多，太不好用

Selection & Range物件

使用這兩個父子物件，能幫我們獲取被選中的區域

Selection

就是藍色被選中的可視區域

Range

就是邏輯裡面的一塊區域，與視覺化無關

獲取Range

從一個藍色選中的區域中獲取到Range物件，用如下的方法

var selection = window.getSelection();
var range;
if(selection.rangeCount){
    range = selection.getRangeAt(0);
}

var selection = window.getSelection();

var range;

if(selection.rangeCount){

range = selection.getRangeAt(0);

}

拿到Range，我們還要分析被選中的葉子節點，這裡有很多坑點
首先Range物件，我們常用的五個屬性
startContainer 開始選中的元素
startOffset 開始選中的偏移
endContainer
endOffset
commonAncestorContainer 共同的最近的祖先結點

startContainer有兩種情況，一種是元素，但這時被選中的是其子結點，這時候startOffset代表的是被選中的子結點的index，子結點可能是葉子結點，也可能是element結點，另外一種可能是葉子結點（textNode)，startOffset代表的是text的偏移位置，比較坑的是，有可能偏移位置是不存在的str，什麼意思呢，就是比如
startContainer對應葉子結點abcd
startOffset如果是1，那就被選中的開始就是從第1個字元開始（下標從0算）即bcd
但startOffset還可能是4，這時就坑了，開始什麼都沒有
同樣endContainer也是如此

我們的任務是要找出被選中的葉子結點，然後進行增刪樣式處理，當前，前提是保證已經正則化過了
找出被選中的葉子結點並非一件容易的事情
文章比較長，請待後續更新

iOS使用UITableView實現的富文字編輯器
2019-04-04
iOSUIView
SpringMVC整合富文字編輯器
2019-04-18
SpringMVC
分享 - 富文字編輯器 Froala Editor
2018-08-27
SSM使用UEditor富文字編輯器
2020-11-06
SSM
線上富文字編輯器初探
2022-04-28
半成品md富文字編輯器
2021-11-11
[Djangorestframework]-富文字編輯器的使用
2020-12-22
DjangoRESTFramework
深入淺出contenteditable富文字編輯器
2019-03-04
Eleditor移動端富文字編輯器
2019-05-11
vue 富文字編輯器 vue-quill-editor
2018-11-07
VueUI
Django後臺管理配置富文字編輯器
2018-05-28
Django
在VueJS中使用 froala 富文字編輯器
2024-03-10
VueJS
Tinymce - 宇宙第一富文字編輯器？[1]
2019-09-19
Tinymce - 宇宙第一富文字編輯器？[2]
2019-09-19
Tinymce - 宇宙第一富文字編輯器？[3]
2019-09-20
九、Vue+Element使用富文字編輯器
2021-09-09
Vue
HTML 頁面使用 wangeditor 富文字編輯器
2021-06-02
HTML
現代富文字編輯器Quill的內容渲染機制
2021-01-28
UI
一款開源的Markdown轉富文字編輯器的實現原理剖析
2022-06-10
幾種開源富文字編輯器對比
2018-10-20
quill 富文字編輯器自定義格式化
2019-04-06
UI
富文字及編輯器的跨平臺方案
2021-08-17
淺析富文字編輯器框架Slate.js
2021-07-08
框架JS
關於專案中使用的富文字編輯器markdown和傳統的富文字編輯器的對比和選擇
2021-05-01
富文字編輯器:UEditor與wangEditor 初使用總結
2019-04-10
各種富文字/ HTML編輯器和框架比較
2019-01-26
HTML框架
富文字編輯器 VUE-QUILL-EDITOR 使用教程（最全）
2023-05-12
VueUI
Element UI 整合富文字編輯器 vue-quill-editor
2020-01-12
UIVue
一個百度富文字編輯器的坑
2020-10-27
富文字編輯器之遊戲角色升級ing
2021-07-05
遊戲
re-editor -- 開箱即用的react富文字編輯器
2019-03-21
React
basecamp/trix: 用於日常寫作的富文字編輯器
2018-09-30
Vue-Cli 3+tinymce 5 富文字編輯器整合
2019-09-27
Vue
日常筆記一：擷取富文字編輯器中的文字內容
2021-06-07
筆記
富文字編輯器Quill(二)上傳圖片與視訊
2019-01-22
UI
一個富文字編輯器quill 以Vue專案為例
2019-03-27
UIVue
Vue 自定義富文字編輯器 tinymce 支援匯入 word 模板
2018-09-13
Vue
ckeditor4.8 富文字編輯器的使用與填坑-PHP
2020-01-10
PHP
日常筆記二：獲取富文字編輯器中圖片
2021-06-07
筆記

手把手實現富文字編輯器

前言

功能

API能力

第一步

串的正則化

我們可以看到規律

增加的實現

Selection & Range物件

Selection

Range

獲取Range

相關文章