百度编辑器百度编辑器

百度编辑器（UEditor）开发教程——教你如何二次开发扩展插件（按钮插件）

技术朱言俊 2016-10-29 阅读：1513

发送到手机

对于网站建设中使用的富文本编辑器不得不提百度的富文本编辑器UEditor了（下面简称ue）。

ue提供了丰富实用的功能，让网络编辑者感觉像使用word一样方便，深受欢迎。对于我们稻壳互联来说ue是基于BSD协议的开源产品，允许自由使用和修改，这就成为稻壳互联Coral系列产品的首选。

在项目中ue提供的功能已可以满足绝大多数的需求，但业务逻辑的复杂多变，又促使着我们需要根据实际业务需求来开发更加强大的功能，接下来就通过几个小列子来带大家来一步步了解网站建设中ue二次开发。

第一篇添加自定义的普通按钮

我们要实现ue编辑框内“选中文本通过点击自定义按钮实现加粗和还原”插件。

注：本文基于UEditor1.4.3.3版本

1、引入ue相关文件，写好初始代码。

<!doctype html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>UEditor添加自定义的普通按钮的示例</title><script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script>
</head>
<body>
<h1>UEditor添加自定义的普通按钮的示例</h1>
<script type="text/plain" id="myEditor"></script><!-- 使用ue -->
<script type="text/javascript">// 自定义的普通按钮// todo::这里待会书写“选中文字通过点击自定义按钮实现加粗和还原”的功能// 实例化ueditorUE.getEditor('myEditor',{toolbars:[['button']],});
</script>
</body>
</html>

2、使用ue提供的registerUI接口。

使用此接口就可以动态注入扩展的内容到ue中了，此为前端开发编写插件的基础，接下来插件的代码都是写在这个接口里面的。

UE.registerUI('button',function(editor,uiName){// 这里写插件的代码
},[index, [editorId]]);

·index,是你想放到toolbar的那个位置，默认是放到最后。

·editorId,当你的页面上有多个编辑器实例时，你想将这个ui扩展到那个编辑器实例上，这里的editorId是给你编辑器初始化时，传入的id,默认是每个实例都会加入你的扩展。

3、注册按钮执行时的command命令

command命令即按钮触发点击、选中等等事件后的动作。这里是我们实现选中加粗的核心代码。execCommand('bold')是ue内部提供的一个命令，执行效果是：加粗已选文本，对已加粗的文本执行该命令将取消加粗。

editor.registerCommand(uiName,{execCommand:function(){editor.execCommand('bold');}
});

4、创建一个button

创建的按钮绑定click事件，并在click事件触发时执行上面注册的command命令。

注意：创建的这个button在registerUi接口中必须返回。

var btn = new UE.ui.Button({name:uiName,title:'加粗',onclick:function () {editor.execCommand(uiName);}
});// 因为你是添加button,所以需要返回这个button
return btn;

好了以上代码已经创建了一个可以使文本加粗的插件了。但是我们做事要尽善尽美，我们希望当点到编辑内容上时，按钮要做的选中的状态反射。

注意：这段代码要写在返回按钮之前。

editor.addListener('selectionchange', function () {if(editor.queryCommandState('bold')){btn.setChecked(true);}else{btn.setChecked(false);}
});return btn;

在响应式网站中做到这一步就已经大功告成了，以下是完整代码：

<!doctype html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>UEditor添加自定义的普通按钮的示例</title><script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script>
</head>
<body>
<h1>UEditor添加自定义的普通按钮的示例</h1>
<script type="text/plain" id="myEditor"></script><!-- 使用ue -->
<script type="text/javascript">// 自定义的普通按钮UE.registerUI('button',function(editor,uiName){// 注册按钮执行时的command命令editor.registerCommand(uiName,{execCommand:function(){editor.execCommand('bold');}});// 创建一个buttonvar btn = new UE.ui.Button({name:uiName,title:'加粗',onclick:function () {editor.execCommand(uiName);}});// 当点到编辑内容上时，按钮要做的状态反射editor.addListener('selectionchange', function () {if(editor.queryCommandState('bold')){btn.setChecked(true);}else{btn.setChecked(false);}});return btn;});// 实例化UEditorUE.getEditor('myEditor',{toolbars:[['button']],});
</script>
</body>
</html>