####命令API 以下是編輯器命令操作相關的API，**使用以下API，最好先要了解瀏覽器的`document.execCommand`的相關知識** ----- - **`editor.command`** 對`document.execCommand`執行瀏覽器基礎命令的封裝。在二次開發中，如果遇到這種情況，盡量用分裝好的`edtior.command`。例如： ```js $('#btn').click(function (e) { // 注意，下面的 e 參數盡量要傳，否則可能導致其他問題 // 等同于 document.execCommand('bold') editor.command(e, 'bold'); // 等同于 document.exexCommand('BackColor', false, '#003399') editor.command(e, 'BackColor', '#003399'); }); ``` ----- - **`editor.commandForElem`** 針對當前選中的元素，向上查找，得到符合傳入條件的父元素。然后把這個父元素當做選區，來執行命令。除了第一個參數之外，后面的參數和`editor.command`相同。例如： ```js $('#btn').click(function (e) { // 注意，下面的 e 參數盡量要傳，否則可能導致其他問題 // 針對當前選區所處于的 b strong 元素，然后執行命令 editor.command('b,strong', e, 'bold'); // 為所處的整個 p 元素設置背景色 editor.command('p', e, 'BackColor', '#003399'); }); ``` ----- - **`editor.customCommand`** 用于自定義的命令操作，而非`document.execCommand`提供的基礎命令。 **注意，建議你對編輯內容的所有修改，都使用命令的方式。如果基礎命令滿足不了要求，一定要使用這里的自定義命令。不要忽略命令，自己寫代碼來修改。那樣會出現各種問題！！！**如果覺得好奇，可以搜索源碼中的`E.fn.customCommand`來看看，自定義命令中那些復雜的操作過程。 程序舉例： ```js $('#btn').click(function (e) { // 注意，下面的 e 參數盡量要傳，否則可能導致其他問題 editor.command(e, function () { // 這里的 this 指向 editor 對象本身 var editor = this; editor.$txt.append('<p>自定義命令追加的內容</p>'); }); }); ``` ----- - **`editor.queryCommandValue`** 對`document.queryCommandValue`的封裝，使用方法和`document.queryCommandValue`一樣。分裝中，規避了`IE8`異常錯誤。 ----- - **`editor.queryCommandState`** 對`document.queryCommandState`的封裝，使用方法和`document.queryCommandState`一樣。分裝中，規避了`IE8`異常錯誤。 ----- - **`editor.queryCommandSupported`** 對`document.queryCommandSupported`的封裝，使用方法和`document.queryCommandSupported`一樣。分裝中，規避了`IE8`異常錯誤。 ---- - **`editor.commandHooks`** 當遇到瀏覽器的`document.execCommand`不支持的命令時，就需要自定義一個命令，放在`editor.commandHooks`中。例如，IE瀏覽器的`document.execCommand`不支持`insertHtml`命令，為了保證IE瀏覽器的可用性，就需要增加這樣的hook ```js editor.commandHooks.insertHtml = function (html) { var $elem = $(html); var rangeElem = editor.getRangeElem(); var targetElem; targetElem = editor.getLegalTags(rangeElem); if (!targetElem) { return; } $(targetElem).after($elem); }; ```