百度编辑器百度编辑器

最新推荐文章于 2024-09-12 11:52:05 发布

lvyasen

最新推荐文章于 2024-09-12 11:52:05 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/lvyasen/article/details/78410557

版权

百度编辑器（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::这里待会书写“选中文字通过点击自定义按钮实现加粗和还原”的功能


  // 实例化ueditor
  UE.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');
            }
        });
    
        // 创建一个button
        var 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;
    });
  
  // 实例化UEditor
  UE.getEditor('myEditor',{
    toolbars:[['button']],
  });
</script>
</body>
</html>