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

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

商务QQ: 69893005、3102411850 商务热线(5*8小时): 010-64808099 官方邮箱: jeecgos@163.com

查看: 8008|回复: 0

实战-Ueditor扩展二次开发

[复制链接]
发表于 2015-9-24 16:16:38 | 显示全部楼层 |阅读模式
第一部分 开发前期准备   

1、UEditor从1.4.1开始,添加对于二次开发的扩展支持。
   Jeewx扩展二次开发采用1.4.3.1 Jsp 版本

2、上传图片设置
   简述: UE做的不够灵活,不如老版本

   [1] 配置文件:ueditor/jsp/config.json
       说明: 所有项目配置访问前缀
1.png

   [2] 引入UE依赖的JAR包
       特殊说明:UE自带的ueditor-1.1.2.jar有问题,经过修改源码好用。
第二部分 扩展增加按钮DEMO

  [1] customizeToolbarUIDemo.html页面
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>完整demo</title>
  5.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  6.     <!--UEditor-->
  7.     <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
  8.     <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script>
  9.     <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
  10.     <!--添加按钮-->
  11.     <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>
  12.     <style type="text/css">
  13.         .clear {
  14.             clear: both;
  15.         }
  16.         div{
  17.             width:100%;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div>
  23.     <h1>二次开发demo</h1>
  24.     <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  25. </div>
  26. </body>
  27. <script type="text/javascript">
  28.     //实例化编辑器
  29.     UE.getEditor('editor');
  30. </script>
  31. </html>
复制代码
   [2] addCustomizeButton.js页面
  1. UE.registerUI('微信模板', 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]修改JSP页面,引入插件JS
        weixin/guanjia/newstemplate/weixinArticle-update.jsp

2.png

   


    [2]插件JS源码
  1. UE.plugins['weixin_template'] = function () {
  2.     var me = this,thePlugins = 'weixin_template';
  3.     me.commands[thePlugins] = {
  4.         execCommand:function (cmd,uiName) {
  5.                 var pos='WXNRQ';
  6.             if(uiName=='内容区'){
  7.                 pos           ='WXNRQ';//此处编码要对应weixin数据字典项
  8.         }if(uiName=='关注引导'){
  9.                 pos           ='WXGZYD';
  10.         }else if(uiName=='标题'){
  11.                 pos           ='WXBT';
  12.         }else if(uiName=='原文引导'){
  13.                 pos           ='WXYWYD';
  14.         }else if(uiName=='分隔线'){
  15.                 pos           ='WXFGX';
  16.         }else if(uiName=='互推账号'){
  17.                 pos           ='WXHTZH';
  18.         }else if(uiName=='我的样式'){
  19.                 pos           ='WXWDYS';
  20.         }else if(uiName=='其他'){
  21.                 pos           ='WXQT';
  22.         }
  23.             var dialog = new UE.ui.Dialog({
  24.                 iframeUrl:this.options.UEDITOR_HOME_URL + '/demo/weixin.html?type='+pos,
  25.                 name:thePlugins,
  26.                 editor:this,
  27.                 title: '微信图文模板',
  28.                 cssRules:"width:740px;height:430px;",
  29.                 buttons:[
  30.                 {
  31.                     className:'edui-okbutton',
  32.                     label:'确定',
  33.                     onclick:function () {
  34.                         dialog.close(true);
  35.                     }
  36.                 }]
  37.             });
  38.             dialog.render();
  39.             dialog.open();
  40.         }
  41.     };
  42. };

  43. function weixinButton(editor,uiName){
  44.     //注册按钮执行时的command命令,使用命令默认就会带有回退操作
  45.     editor.registerCommand(uiName,{
  46.         execCommand:function(){
  47.                 try {
  48.                      editor.execCommand('weixin_template',uiName);
  49.             } catch ( e ) {
  50.                 alert('打开模板异常'+e);
  51.             }
  52.         }
  53.     });
  54.     //创建一个button
  55.     var btn = new UE.ui.Button({
  56.         //按钮的名字
  57.         name:uiName,
  58.         //提示
  59.         title:uiName,
  60.         //需要添加的额外样式,指定icon图标,这里默认使用一个重复的icon
  61.         cssRules :'background-position:-902px -45px;width: 63px!important;',
  62.         //点击时执行的命令
  63.         onclick:function () {
  64.             //这里可以不用执行命令,做你自己的操作也可
  65.            editor.execCommand(uiName);
  66.         }
  67.     });
  68.     //因为你是添加button,所以需要返回这个button
  69.     return btn;
  70. }
  71. UE.registerUI('微信图文模板',weixinButton);
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表