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

发送到手机
使用"扫一扫"即可发送至手机

对于网站建设中使用的富文本编辑器不得不提百度的富文本编辑器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>

在下一篇的示例中将介绍如何开发带下拉菜单按钮的插件,《百度编辑器(UEditor)开发系列——教你如何二次开发扩展插件(下拉菜单插件)》

阅读相关主题
百度编辑器(UEditor)开发教程——教你如何二次开发扩展插件(按钮插件)

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

分享:

标签: