JS編寫自己的富文本編輯器

       富文本編輯器，網上有很多功能齊全種類豐富的如百度的Ueditor，簡單適用型的如WangEditor等等。在經過一番挑選后，我發現都不適用現在的項目，然后決定自己造輪子玩玩。富文本編輯器中主要涉及到Jascript中一個原生的方法：execCommand。execCommand方法是一個對當前文檔、當前選擇或給出范圍的命令。簡單來講，我們可以利用execCommand方法對輸入的文本內容進行編輯，處理html數據（即給文本內容（圖片）附加響應的html標簽及樣式）。

        execCommand方法常用到的格式是：document.execCommand(參數1,參數2,參數3)。

           參數1：指令參數（詳見后面的說明）

           參數2：交互方式，為布爾值（當設為true時，將顯示對話框；當為false時，不顯示對話框）

           參數3：動態參數，一般為可用值或屬性值

在項目中我構建富文本編輯器的控件效果如下：

       上圖中的富文本編輯器包括是11個常用功能，依次分別是：回退、前進、加粗、斜體、下划線、刪除線、顏色、左縮進、右縮進、無序列表、有序列表。因為代碼是在backbone框架下建構的，富文本編輯器做成控件需要設置成可配置的，以滿足復雜程度不同的需求。控件中做了15個功能

html代碼如下：

 <ul>
        <%if(editorModels.indexOf("undo")>-1){%>
        <li>
            <a class='btn' data-role='undo' href='#' title="回退">
                <i class='glyphicon glyphicon-arrow-left'></i>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("redo")>-1){%>
        <li>
            <a class='btn' data-role='redo' href='#'>
                <i class='glyphicon glyphicon-arrow-right' title="前進"></i>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("bold")>-1){%>
        <li>
            <a class='btn' data-role='bold' href='#' title="加粗文字">
                <b>B</b>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("italic")>-1){%>
        <li>
            <a class='btn' data-role='italic' href='#' title="斜體文字">
                <em>I</em>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("underline")>-1){%>
        <li>
            <a class='btn' data-role='underline' href='#' title="下划線文字">
                <u>
                    <b>U</b>
                </u>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("strikeThrough")>-1){%>
        <li>
            <a class='btn' data-role='strikeThrough' href='#' title="刪除線文字">
                <strike>S</strike>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("colors")>-1){%>
        <li style="position:relative;">
            <a class='btn' id="colorControl" href='#' title="文字顏色">
                <u>
                    <strong>A</strong>
                </u>
            </a>
            <div id="colorSelect">
                <ul>
                    <li>
                        <a href="#" style="background:#e33737" data-type='0'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#e28b41" data-type='1'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#c8a732" data-type='2'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#209361" data-type='3'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#418caf" data-type='4'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#aa8773" data-type='5'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#999" data-type='6'></a>
                    </li>
                    <li>
                        <a href="#" style="background:#333" data-type='7'></a>
                    </li>
                </ul>
            </div>
        </li>
        <%}%>
        <%if(editorModels.indexOf("indent")>-1){%>
        <li>
            <a class='btn' data-role='indent' href='#' title="向左縮進">
                <i class='glyphicon glyphicon-indent-right'></i>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("outdent")>-1){%>
        <li>
            <a class='btn' data-role='outdent' href='#' title="向右縮進">
                <i class='glyphicon glyphicon-indent-left'></i>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("insertUnorderedList")>-1){%>
        <li>
            <a class='btn' data-role='insertUnorderedList' title="無序列表" href='#'>
                <i class='glyphicon glyphicon-list'></i>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("insertOrderedList")>-1){%>
        <li>
            <a class='btn' data-role='insertOrderedList' title="有序列表" href='#'>
                <i class='glyphicon glyphicon-list-alt'></i>
            </a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("justifyLeft")>-1){%>
        <li>
            <a class='btn' data-role='justifyLeft' href='#' title="左對齊"><i class='glyphicon glyphicon-align-left'></i></a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("justifyCenter")>-1){%>
        <li>
            <a class='btn' data-role='justifyCenter' href='#' title="居中"><i class='glyphicon glyphicon-align-center'></i></a>  
        </li>
        <%}%>
        <%if(editorModels.indexOf("justifyRight")>-1){%>
        <li>
            <a class='btn' data-role='justifyRight' href='#' title="右對齊"><i class='glyphicon glyphicon-align-right'></i></a>
        </li>
        <%}%>
        <%if(editorModels.indexOf("justifyFull")>-1){%>
        <li>
            <a class='btn' data-role='justifyFull' href='#' title="兩端對齊"><i class='glyphicon glyphicon-align-justify'></i></a>
        </li>
       <%}%>       
    </ul>

js代碼如下：

Commoncontrols: function (e) {
            document.execCommand($(e.currentTarget).data('role'), false, null);
        },
        ColorControls: function (e) {
            var me = this;
            $(me.el).find("#colorSelect").show();
            $(document).click(function (e) {
                e.stopPropagation();
                var colorType = $(e.target).attr('data-type')
                switch (colorType) {
                    case '0': document.execCommand("ForeColor", false, '#e33737'); break;
                    case '1': document.execCommand("ForeColor", false, '#e28b41'); break;
                    case '2': document.execCommand("ForeColor", false, '#c8a732'); break;
                    case '3': document.execCommand("ForeColor", false, '#209361'); break;
                    case '4': document.execCommand("ForeColor", false, '#418caf'); break;
                    case '5': document.execCommand("ForeColor", false, '#aa8773'); break;
                    case '6': document.execCommand("ForeColor", false, '#999'); break;
                    case '7': document.execCommand("ForeColor", false, '#333'); break;
                }
                $(me.el).find("#colorSelect").hide();
            });
            e.stopPropagation();
        }

引用Editor控件如下：

 var EditorComponents = new EditorComponent();
            EditorComponents.setElement(me.$el.find("#editorMenu")).render(
                {
                    editorModels: ['undo', 'redo', 'bold', 'italic', 'underline', 'strikeThrough', 'colors', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList']
                }
            );

editorModels--屬性，用來配置編輯器的選項。選項由指令參數構成。針對不同的指令參數需要做特殊的處理，例如上圖控件中的顏色，可選顏色有8種，效果如下：

如果需要配置更多的顏色，可以在上述的html文件中進行補充修改，當然別忘了樣式。

/*********************************我是分割線********************************************************/

指令集如下：

2D-Position 允許通過拖曳移動絕對定位的對象。
AbsolutePosition 設定元素的 position 屬性為“absolute”(絕對)。
BackColor 設置或獲取當前選中區的背景顏色。
Bold 切換當前選中區的粗體顯示與否。
Copy 將當前選中區復制到剪貼板。
CreateBookmark 創建一個書簽錨或獲取當前選中區或插入點的書簽錨的名稱。
CreateLink 在當前選中區上插入超級鏈接，或顯示一個對話框允許用戶指定要為當前選中區插入的超級鏈接的 URL。
Cut 將當前選中區復制到剪貼板並刪除之。
Delete 刪除當前選中區。
FontName 設置或獲取當前選中區的字體。
FontSize 設置或獲取當前選中區的字體大小。
ForeColor 設置或獲取當前選中區的前景(文本)顏色。
FormatBlock 設置當前塊格式化標簽。
Indent 增加選中文本的縮進。
InsertButton 用按鈕控件覆蓋當前選中區。
InsertFieldset 用方框覆蓋當前選中區。
InsertHorizontalRule 用水平線覆蓋當前選中區。
InsertIFrame 用內嵌框架覆蓋當前選中區。
InsertImage 用圖像覆蓋當前選中區。
InsertInputButton 用按鈕控件覆蓋當前選中區。
InsertInputCheckbox 用復選框控件覆蓋當前選中區。
InsertInputFileUpload 用文件上載控件覆蓋當前選中區。
InsertInputHidden 插入隱藏控件覆蓋當前選中區。
InsertInputImage 用圖像控件覆蓋當前選中區。
InsertInputPassword 用密碼控件覆蓋當前選中區。
InsertInputRadio 用單選鈕控件覆蓋當前選中區。
InsertInputReset 用重置控件覆蓋當前選中區。
InsertInputSubmit 用提交控件覆蓋當前選中區。
InsertInputText 用文本控件覆蓋當前選中區。
InsertMarquee 用空字幕覆蓋當前選中區。
InsertOrderedList 切換當前選中區是編號列表還是常規格式化塊。
InsertParagraph 用換行覆蓋當前選中區。
InsertSelectDropdown 用下拉框控件覆蓋當前選中區。
InsertSelectListbox 用列表框控件覆蓋當前選中區。
InsertTextArea 用多行文本輸入控件覆蓋當前選中區。
InsertUnorderedList 切換當前選中區是項目符號列表還是常規格式化塊。
Italic 切換當前選中區斜體顯示與否。
JustifyCenter 將當前選中區在所在格式化塊置中。
JustifyFull  將當前選中區在所在格式化塊兩端對齊。
JustifyLeft 將當前選中區所在格式化塊左對齊。 
JustifyRight 將當前選中區所在格式化塊右對齊。 
LiveResize 迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成后更新。
MultipleSelection 允許當用戶按住 Shift 或 Ctrl 鍵時一次選中多於一個站點可選元素。 
Outdent 減少選中區所在格式化塊的縮進。 
OverWrite 切換文本狀態的插入和覆蓋。 
Paste 用剪貼板內容覆蓋當前選中區。  
Print 打開打印對話框以便用戶可以打印當前頁。 
Redo 重復操作。 
Refresh 刷新當前文檔。 
RemoveFormat 從當前選中區中刪除格式化標簽。 
SaveAs 將當前 Web 頁面保存為文件。 
SelectAll 選中整個文檔。 
StrikeThrough 添加刪除線。 
UnBookmark 從當前選中區中刪除全部書簽。 
Underline 切換當前選中區的下划線顯示與否。 
Undo 回退操作。 
Unlink 從當前選中區中刪除全部超級鏈接。 
Unselect 清除當前選中區的選中狀態。