设为首页收藏本站

JEECG官方网站-企业级JAVA快速开发平台

 找回密码
 立即注册

关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 更新日志 - 技术支持 - 招聘英才

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务QQ: 3102411850、418799587 商务顾问: 010-64808099 商务热线: 18611788525 官方邮箱: jeecgos@163.com

查看: 3179|回复: 0

UEditor如何进行二次开发

[复制链接]

445

主题

31

好友

1万

积分

管理员

Rank: 12Rank: 12Rank: 12

最佳新人 活跃会员 热心会员 推广达人 宣传达人 灌水之王 突出贡献 优秀版主 荣誉管理 JEECG团队成员

发表于 2015-9-23 10:47:45 |显示全部楼层
背景

    UEditor 虽然功能众多,但对于广大开发者来说,还是有很多定制化的功能需求,如果都靠UEditor团队自己开发那是不现实的,这时就需要广大开发者在UEditor的基础上自己开发定制功能。但在之前的版本中,UEditor对于二次开发的支持不够优化,经常需要开发者不仅要开发相应的功能,例如command命令,plugin插件等,还要在UEditor上修改多处文件,例如,添加按钮,添加样式等等,才能将功能添加到UEditor中。这样的方式对于以后的升级和后续定制功能的维护,都会造成维护困难的问题。介于次,UEditor从1.4.1开始,添加对于二次开发的扩展支持。

二次开发方式

    无需对 UEditor 代码做任何修改,只需在UEditor之外通过UEditor提供的二次开发接口开发定制功能.这种开发方式不仅避免了修改UEditor源码,方便日后UEditor的升级,而且通过接口,可以将开发的定制功能维护到一个文件中或者一个目录中,方便日后对其维护。

部署定制功能

  对于 UEditor 的二次开发,一般多为添加按钮,下拉筐或者是添加一个dialog。基于这几种常规的方式,我在_examples目录下分别书写了3个类型的定制demo。
1、 addCustomizeButton.js 添加一个按钮
2、 addCustomizeCombox.js 添加一个下拉框
3、 addCustomizeDialog.js 添加一个弹出层
    除了添加弹出层需要一个而外的html页面外,对于需要添加和修改的功能代码全部都维护到一个js文件中了。
   使用文件的方式:
  1. <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
  2. <script type="text/javascript" charset="utf-8" src="editor_api.js">
  3. </script>
  4. <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
  5. <!--添加按钮-->
  6. <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>
复制代码
    新添加的按钮就完成了。实例化编辑器时,无需再而外添加任何代码。

开发细节

    前面讲了如何部署你的功能,这个小节来和大家讲一下,UEditor提供那些接口,让大家可以在编辑器之外扩展你的功能。
  1. UE.registerUI('uiname', function(editor, uiname) {
  2.     //do something
  3. }, [index, [editorId]]);
复制代码
    考虑到大家的功能基本上都会扩展一个UI和这个UI做的事情,所以UEditor提供了registerUI这个接口,可以让开发者动态的注入扩展的内容。
1、uiname,是你为新添加的UI起的名字,这里可以是1个或者多个,“uiname”后者是“uiname1 uiname2 uiname3”
2、function,是实际你要做的事情,这里提供两个参数,editor是编辑器实例,如果你有多个编辑器实例,那每个编辑器实例化后,都会调用这个function,并且把editor传进来,uiname,你为ui起的名字,如果前边你添加的是多个的化,这里function会被调用多次,并且将每一个ui名字传递进来.如果函数返回了一个UI 实例,那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何UI。比如希望监控selectionchange事件,在某些场景下弹出浮层,这时就不需要返回任何UI.
3、index,是你想放到toolbar的那个位置,默认是放到最后
4、editorId,当你的页面上有多个编辑器实例时,你想将这个ui扩展到那个编辑器实例上,这里的editorId是给你编辑器初始化时,传入的id,默认是每个实例都会加入你的扩展

   添加一个按钮
  1. UE.registerUI('button', function(editor, uiName) {
  2.     //注册按钮执行时的command命令,使用命令默认就会带有回退操作
  3.     editor.registerCommand(uiName, {
  4.         execCommand: function() {
  5.             alert('execCommand:' + uiName)
  6.         }
  7.     });
  8.     //创建一个button
  9.     var btn = new UE.ui.Button({
  10.         //按钮的名字
  11.         name: uiName,
  12.         //提示
  13.         title: uiName,
  14.         //添加额外样式,指定icon图标,这里默认使用一个重复的icon
  15.         cssRules: 'background-position: -500px 0;',
  16.         //点击时执行的命令
  17.         onclick: function() {
  18.             //这里可以不用执行命令,做你自己的操作也可
  19.             editor.execCommand(uiName);
  20.         }
  21.     });
  22.     //当点到编辑内容上时,按钮要做的状态反射
  23.     editor.addListener('selectionchange', function() {
  24.         var state = editor.queryCommandState(uiName);
  25.         if (state == -1) {
  26.             btn.setDisabled(true);
  27.             btn.setChecked(false);
  28.         } else {
  29.             btn.setDisabled(false);
  30.             btn.setChecked(state);
  31.         }
  32.     });
  33.     //因为你是添加button,所以需要返回这个button
  34.     return btn;
  35. });
复制代码
    添加多个
  1. UE.registerUI('bold italic redo undo underline strikethrough', function(editor, uiName) {
  2.     //注册按钮执行时的command命令,使用命令默认就会带有回退操作
  3.     editor.registerCommand(uiName, {
  4.         execCommand: function() {
  5.             alert('execCommand:' + uiName)
  6.         }
  7.     });
  8.     //创建一个button
  9.     var btn = new UE.ui.Button({
  10.         //按钮的名字
  11.         name: uiName,
  12.         //提示
  13.         title: uiName,
  14.         //添加额外样式,指定icon图标,这里默认使用一个重复的icon
  15.         cssRules: 'background-position: -500px 0;',
  16.         //点击时执行的命令
  17.         onclick: function() {
  18.             //这里可以不用执行命令,做你自己的操作也可
  19.             editor.execCommand(uiName);
  20.         }
  21.     });
  22.     //当点到编辑内容上时,按钮要做的状态反射
  23.     editor.addListener('selectionchange', function() {
  24.         var state = editor.queryCommandState(uiName);
  25.         if (state == -1) {
  26.             btn.setDisabled(true);
  27.             btn.setChecked(false);
  28.         } else {
  29.             btn.setDisabled(false);
  30.             btn.setChecked(state);
  31.         }
  32.     });
  33.     //因为你是添加button,所以需要返回这个button
  34.     return btn;
  35. });
复制代码
    在完整版本的下载包里,我写了3个例子,添加一个按钮,下拉筐,弹出一个浮层,大家可以参考
专业解答JEECG疑难杂症,JEECG常见问题汇总在:http://t.cn/RvYsEF6
您需要登录后才可以回帖 登录 | 立即注册



Archiver|手机版|JEECG技术论坛 - 基于BPM的低代码开发平台 ( 京ICP备12013567号-3 )  

GMT+8, 2020-6-2 16:24 , Processed in 1.638003 second(s), 26 queries , Gzip On.

JEECG Open Source

© 2001-2012 Comsenz Inc.

回顶部