前言

ueditor 1.4.3
【UEditor】介绍
代码： https://gitee.com/mirrors/ueditor/tree/v1.4.3

官方自定义组件文档

http://fex.baidu.com/ueditor/#dev-developer

示例：添加一个按钮

参考 addCustomizeButton.js

addCustomizeButton.js源码

UE.registerUI('button',function(editor,uiName){//注册按钮执行时的command命令，使用命令默认就会带有回退操作editor.registerCommand(uiName,{execCommand:function(){alert('execCommand:' + uiName)}});//创建一个buttonvar btn = new UE.ui.Button({//按钮的名字name:uiName,//提示title:uiName,//需要添加的额外样式，指定icon图标，这里默认使用一个重复的iconcssRules :'background-position: -500px 0;',//点击时执行的命令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,所以需要返回这个buttonreturn btn;
}/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);

注册command命令

UE.registerUI('button',function(editor,uiName){//注册按钮执行时的command命令，使用命令默认就会带有回退操作editor.registerCommand(uiName,{execCommand:function(){alert('execCommand:' + uiName)}});...
});

上面的代码注册名为'button'的command命令。
注册command命令后，可以通过代码（editor.execCommand('button');）调用。

向UEditor添加按钮

UE.registerUI('button',function(editor,uiName){...//创建一个buttonvar btn = new UE.ui.Button({//按钮的名字name:uiName,//提示title:uiName,//需要添加的额外样式，指定icon图标，这里默认使用一个重复的iconcssRules :'background-position: -500px 0;',//点击时执行的命令onclick:function () {//这里可以不用执行命令,做你自己的操作也可editor.execCommand(uiName);}});...//因为你是添加button,所以需要返回这个buttonreturn btn;
});

记得返回按钮组件：return btn。
onclick为按钮的点击操作。将该点击操作替换成自己的。
cssRules :'background-position: -500px 0;', 为按钮图标。默认的图标文件为themes/default/images/icons.png。图标尺寸为20px*20px。'background-position: -500px 0;'为图标文件中的偏移量，其含义为第1行第25个图标，通过修改偏移量更改按钮图标。

按钮状态反射

UE.registerUI('button',function(editor,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);}});...
});

上面代码含义为：监听UEditor的selectionchange事件。当该事件发生后，检查 Command State 。当 state == -1 时，禁用按钮；反之启用按钮。

启用按钮截图：

禁用按钮截图：

引用控件

<!DOCTYPE HTML>
<html>
<head><title>完整demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="editor_api.js"> </script><!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--><script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script><!--添加按钮--><script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script><style type="text/css">.clear {clear: both;}div{width:100%;}</style>
</head>
<body>
<div><h1>二次开发demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
</body>
<script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例UE.getEditor('editor',{//清空了工具栏toolbars:[['source']]})</script>
</html>

【UEditor】自定义插件：按钮相关推荐

uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理
前言本帖所有内容均用于学习使用,如有涉及侵权,请看到后联系我进行删帖上图片环境 "axios": "^0.21.1", "element-ui& ...
使用自定义的按钮替换默认的input type='file'
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){$.fn.brows ...
Cordova应用的JavaScript代码和自定义插件代码的调试
我之前写过三篇Cordova相关的技术文章.当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候. 本文就介绍Cordova应用的调试步骤. 如果 ...
基于Java的Minecraft游戏后端自定义插件的Java实践项目整理
Minecraft_Plugin 1.项目概述 2.系统设计 3.功能模块成果展示 4.个人总结 1.项目概述 1.1 项目简介小组准备编写一个具有武器战斗,道具收集.互动社交和任务悬赏四大系统的聚 ...
Ueditor自定义开发地图功能
Ueditor自定义开发地图功能由于最近需要对地图功能进行修改,所以基于Uedior做了二次开发,根据百度地图官方提供的api和例子,完成了以下功能: 即:显示圆形区域内的定点范围的周边设施! 地图 ...
jQuery05 自定义插件第三方插件
 <script src="./js/jquery.validate.js" type=&quo ...
tinymce标准配置，和自定义每个按钮配置
默认配置 tinymce.init({selector: '#tinydemo',language:'zh_CN', }); 标准化常用初始化配置 tinymce.init({selector: '# ...
html自定义菜单按钮,自定义菜单：Menu button
Menu button的开发背景用户在使用Chrome插件的时候,通常都是一种功能单一的Chrome插件来满足用户某一种特殊的需求,比如新标签页插件来t替换Chrome原有的新标签页,插件用于访问网 ...
java自定义maven插件_Maven自定义插件的实现
为了快速学习自定义 Maven 插件的过程,接下来将实现一个简单的 Hello Maven 插件,功能很简单:输出 Hello World 插件.具体步骤和操作如下. 创建 Maven 新项目,选择 ...
AutoCAD二次开发三种添加插件按钮的方法
在上一篇关于AutoCAD的文章中,我将很多关于CAD的博客相关资源进行了说明,这一篇文章我将介绍如何在AutoCAD中的ribbon中添加相应的按钮.就是下面这种按钮: PS:在开发中我们最好使用中 ...

【UEditor】自定义插件：按钮

前言

官方自定义组件文档

示例：添加一个按钮

addCustomizeButton.js源码

注册command命令

向UEditor添加按钮

按钮状态反射

引用控件

【UEditor】自定义插件：按钮相关推荐

最新文章

热门文章