UEditor 二次开发实例，添加清除Mac下产生的BS字符（Backspace键）功能
微wx笑
2022-11-01【前端开发】
1
0关键字：
UEditor 二次开发 Mac
前文 BS字符 Backspace键 是在帝国CMS的内容编辑页面添加了清除功能按钮，功能是实现了，但是和Ueditor不是一体的，所以学习了如何对UEditor进行二次开发，重新实现了这个功能。版
前文 BS字符 Backspace键 是在帝国CMS的内容编辑页面添加了清除功能按钮，功能是实现了，但是和Ueditor不是一体的，所以学习了如何对UEditor进行二次开发，重新实现了这个功能。
版本要求
UEditor 虽然功能众多，但对于广大开发者来说，还是有很多定制化的功能需求，如果都靠UEditor团队自己开发那是不现实的，这时就需要广大开发者在UEditor的基础上自己开发定制功能。但在之前的版本中，UEditor对于二次开发的支持不够优化，经常需要开发者不仅要开发相应的功能，例如command命令,plugin插件等，还要在UEditor上修改多处文件，例如，添加按钮，添加样式等等，才能将功能添加到UEditor中。这样的方式对于以后的升级和后续定制功能的维护，都会造成维护困难的问题。介于次，UEditor从1.4.1开始，添加对于二次开发的扩展支持。
二次开发方式
无需对 UEditor 代码做任何修改，只需在UEditor之外通过UEditor提供的二次开发接口开发定制功能.这种开发方式不仅避免了修改UEditor源码，方便日后UEditor的升级，而且通过接口，可以将开发的定制功能维护到一个文件中或者一个目录中，方便日后对其维护。
效果图：
图标我是直接修改原有的图标文件：ueditor/themes/default/images/icons.png
功能代码：
UE.registerUI('remove_bs', function(editor, uiName) {
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
this.setContent(this.getContent().replaceAll('', ''), false);
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,
//提示
title: "清除BS字符",//清除Mac下产生的BS字符Backspace
//添加额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules: 'background-position: -752px -76px;',
//点击时执行的命令
onclick: function() {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因为你是添加button,所以需要返回这个button
return btn;});细节说明
前面讲了如何部署你的功能，这个小节来和大家讲一下，UEditor提供哪些接口，让大家可以在编辑器之外扩展你的功能。
UE.registerUI('uiname', function(editor, uiname) {
//do something}, [index, [editorId]]);考虑到大家的功能基本上都会扩展一个UI和这个UI做的事情，所以UEditor提供了registerUI这个接口，可以让开发者动态的注入扩展的内容。
uiname,是你为新添加的UI起的名字，这里可以是1个或者多个，“uiname”后者是“uiname1 uiname2 uiname3”
注意：uiname 这里有一个坑，必须是小写的。
function，是实际你要做的事情，这里提供两个参数，editor是编辑器实例，如果你有多个编辑器实例，那每个编辑器实例化后，都会调用这个function,并且把editor传进来,uiname,你为ui起的名字，如果前边你添加的是多个的化，这里function会被调用多次，并且将每一个ui名字传递进来.如果函数返回了一个UI 实例，那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何UI。比如希望监控selectionchange事件，在某些场景下弹出浮层，这时就不需要返回任何UI。
index,是你想放到toolbar的那个位置，默认是放到最后。
editorId,当你的页面上有多个编辑器实例时，你想将这个ui扩展到那个编辑器实例上，这里的editorId是给你编辑器初始化时，传入的id,默认是每个实例都会加入你的扩展。
调用说明
为了代码的清洁与复用性，可以把二次开发的功能放到一个单独的文件中。
比如我的相关的代码放在 customize.js 文件中就可以了。
<script type="text/javascript" charset="utf-8" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" charset="utf-8" src="/extend/ueditor/base64.min.js"></script> <script type="text/javascript" charset="utf-8" src="/extend/ueditor/ueditor.cfg.js"></script> <script type="text/javascript" charset="utf-8" src="/extend/ueditor/ueditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="/extend/ueditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript" charset="utf-8" src="/extend/ueditor/customize.js"></script>
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-11-01/1563.html
