ueditor自定義控件和圖片請求

認識ueditor

ueditor時百度出的一款很是強大的富文本編輯器，可是並不能將它理解爲一個現成的編輯器。富文本編輯器的原理並不複雜，核心api是document.execCommand，以及Selection和Range操做。對於一些自定義的控件，則能夠用原生的dom操做完成。然而正式由於dom操做和狀態判斷很是複雜，所以ueditor鋪設了整個編輯器的底層邏輯。因此，你應該將ueditor理解成一個基礎設施。

自定義請求

若是遇到富文本編輯器需求，拿到ueditor官網的demo後，首先要改的就是圖片上傳的請求。通常項目中，請求都會封裝成統一的方法，返回Promise或者PromiseLike，所以咱們將serverUrl選項改成一個方法
imgUpload: (file:File) =>Promise<{url:string}>;

而後咱們拋棄它自帶的圖片上傳邏輯，自定義一個控件叫image，沿用simpleupload的圖標，點擊圖標會生成一個input['type="file"']，而後模擬點擊這個input，進行圖片選擇。選中後調用serverUrl中配置的方法，獲得後臺返回的url後執行
editor.execCommand('insertimage',{src:res.url});

具體代碼以下

editorui.image=function(editor) {

    var ui=neweditorui.Button({

    className:"edui-for-simpleupload",

    title:

    editor.options.labelMap['simpleupload'] ||

    editor.getLang("labelMap.simpleupload") ||

    "",

    theme:editor.options.theme,

    onclick:function() {

    var fileInput=document.createElement('input');

    fileInput.id='ueditor-custom-upload'

    fileInput.type='file'

    fileInput.style.display='none'

    fileInput.click()

    fileInput.addEventListener('change',function(e){

    var uploadFn=editor.getOpt('serverUrl');

    uploadFn(e.target.files[0]).then((res)=>{

    editor.execCommand('insertimage',{src:res.url});

          })

        })

      }

    });

editorui.buttons.image=ui;

return ui;

};

而後在ueditor.config.js的toolbars和ueditor.all.js的btnCmds中添加'image'的命令。這樣咱們就大體完成了圖片上傳的改造。

自定義其餘控件

自定義控件分兩個步驟：
1.自定義新的控件ui；2.自定義新的控件命令。咱們舉兩個例子：

對圖片加邊框的控件

首先生成相應的ui，代碼以下，其中ui.setDisabled和ui.setChecked是控制控件是否可點和是否已經加了邊框。editor.execCommand('imgborder')和editor.queryCommandState('imgborder')、editor.queryCommandValue('imgborder')是自定義的控件命令。

有了ui後還須要添加相應的css，咱們找到一張imageborder的圖片，而後在ueditor.css中添加樣式代碼，這樣樣式的改造就完成了。

而後須要自定義image-border的命令：

execCommand執行命令，添加border或者取消border，另外兩個方法是查詢當前是否能夠執行命令和是否已經執行了命令。
固然別忘了在toolbars和btnCmds中別忘了添加相關的命令

至此，這個控件就完成了。

添加字間距控件

字間距是一個下拉列表，首先在ueditor.config.js中進行可選項的配置：toolbars中添加控件'letterspace'
而後改造ueditor.js,btnCmds中添加'letterspace'。
增長letterspace的ui


增長command

最終demo以下