js原生實現富文本編輯器

今天說三點：1.怎么實現的。

　　　　　　2.怎么用。

　　　　　　3.踩到的坑。

　　在很久以前，我一直覺得富文本編輯器是一個很牛的東西，直到昨天為止，我知道了富文本編輯器的原理。

　　先放效果圖，給大家瞄一眼。

　　這是一個很傻的編輯器，之所以很傻是因為只是開發玩玩而已，功能簡單。

說原理。

　　首先編輯部分是一個div，div之所以能編輯是因為一個H5屬性 contentEditable="true" （bool 表示元素能否編輯）;

　　有了這個屬性后，元素就會變成類似textarea一樣的文本域。

　　其次工具欄中的按鈕是動態生成的a標簽里套着img標簽。img是按鈕圖標。

按鈕功能的實現：

　　核心函數是document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);

　　這個函數有三個參數，第一個參數是命令，而命令大多數的意思是在這行或被選中 的元素發生影響（粗體，斜體等）、插入新元素（添加鏈接）或影響整行（縮進）。

　　　　　　　　　　　　第二個參數是 是否展示用戶界面，一般為 false。Mozilla 沒有實現。

　　　　　　　　　　　　第三個參數是 一些命令需要一些額外的參數值（如insertimage需要提供這個image的url）。默認為null。

　　然后通過onclick賦給相應的按鈕，實現相應按鈕的功能。

      舉個栗子：

    <a href="javascript:;" id="edit-btn"><img src="粗體.jpg" alt=""></a>
    //一個加粗的按鈕
    <script>
        var btn = document.getElementById('edit-btn');
        ben.onclick = function() {
            var aa = document.execCommand("bold", false, null);
            console.log(aa);//若log輸出true說明點擊按鈕后按鈕生效；
        }
    </script>

 

　　差不多就是這樣子。

　　具體命令查閱MDN : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand#命令

 

　　編輯器效果：www.wangzhihui.cc/myedit.html (代碼都在查看源碼中，有詳細的注釋)

 2.怎么用。(估計也沒人用2333)

　　直接在相應部位寫html並引入相關css。js

<link rel="stylesheet" href="http://www.wangzhihui.cc/edit.css">
    <div id="myedit">
        <div id="edit-tool">
        <input id="printContent" class="edit-btn" type="button" value="發表文章">
        </div>
        <div id="editor"  value="Click to Editor..."></div>
    </div>
<script src="http://www.wangzhihui.cc/edit.js"></script>

 

　　按鈕會動態創建，如果需要二次開發js、css。

　　css很簡單不用說，說一下二次開發按鈕功能。

var btnConfigs = "bold|null|粗體 italic|null|斜體 strikeThrough|null|刪除線 formatBlock|H1|H1 formatBlock|H2|H2 formatBlock|H3|H3 formatBlock|BLOCKQUOTE|引用 formatBlock|div|結束引用 undo|null|撤銷 redo|null|重做 formatBlock|img|圖片".split(" ");

　　所有功能都存在btnConfigs中，如果添加功能只要在字符串中添加相應 命令|參數|提示名字  設置順序是按鈕順序。
3.踩到的坑
　　最重要的一點就是失去選中問題。剛開始自動生成按鈕的時候按鈕使用ul>li做的，但是選中文字之后點擊li會失去焦點。還好身邊有學長教了一下，點擊錨點鏈接，或者圖片就不會失去焦點，所以將li改成了a標簽
　　然后就是未能完成的圖片功能，上傳圖片過程是先用獲取圖片，然后將文件上傳儲存到服務器，返回服務器的圖片位置，將位置src賦值給execCommand的第三個參數。但是實現不了。
　　剛開始想用圖片預覽方式，試一試能否在網頁中實現預覽。
　　然而預覽功能的實現的過程是，input獲取文件，然后get到這個文件的files，然后再創建一個文件對象，通過文件對象的方法readAsDataURL（），將文件base64編譯成dataUrl，再內嵌到網頁中。但是execCommand第三個參數並不能傳dataURL
　　所以沒有實現圖片預覽。

/*圖片預覽*/
function readAsDataURL(){  
    var file = document.getElementById("file1").files;
    var result=document.getElementById("result");  
    for(i = 0; i< file.length; i ++) {
        var reader  = new FileReader();    
        reader.readAsDataURL(file[i]);  
        reader.onload=function(e){  
              console.log(this);
              result.innerHTML = '<img src="' + this.result +'" alt="" />' + '<br />';  
          }        
       }
}

---

其實一個富文本編輯器實現起來挺簡單的，但是更多的則是對用戶的體驗方面，如何讓編輯器用着更爽。還有一些功能也不是execCommonds命令能解決的。一些編輯器的功能還是很牛的。
就這樣。

下一個准備實現音樂播放器。

加油，你是最胖的！

ylwxhn