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以下