实战-Ueditor扩展二次开发

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

第一部分开发前期准备

1、UEditor从1.4.1开始，添加对于二次开发的扩展支持。

Jeewx扩展二次开发采用1.4.3.1 Jsp 版本

2、上传图片设置

简述: UE做的不够灵活，不如老版本

[1] 配置文件：ueditor/jsp/config.json

说明: 所有项目配置访问前缀

[2] 引入UE依赖的JAR包

特殊说明：UE自带的ueditor-1.1.2.jar有问题，经过修改源码好用。

第二部分扩展增加按钮DEMO

[1] customizeToolbarUIDemo.html页面

<!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="../ueditor.all.min.js"> </script>
<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">
//实例化编辑器
UE.getEditor('editor');
</script>
</html>

[2] addCustomizeButton.js页面

UE.registerUI('微信模板', function(editor, uiName) {
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
      execCommand: function() {
         alert('execCommand:' + uiName)
      }
});
//创建一个button
var btn = new UE.ui.Button({
      //按钮的名字
      name: uiName,
      //提示
      title: uiName,
      //添加额外样式，指定icon图标，这里默认使用一个重复的icon
      cssRules: '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,所以需要返回这个button
return btn;
});

第三部分微信编辑扩展我的素材插件

[1]修改JSP页面，引入插件JS
weixin/guanjia/newstemplate/weixinArticle-update.jsp

[2]插件JS源码

UE.plugins['weixin_template'] = function () {
var me = this,thePlugins = 'weixin_template';
me.commands[thePlugins] = {
      execCommand:function (cmd,uiName) {
            var pos='WXNRQ';
         if(uiName=='内容区'){
            pos          ='WXNRQ';//此处编码要对应weixin数据字典项
      }if(uiName=='关注引导'){
            pos          ='WXGZYD';
      }else if(uiName=='标题'){
            pos          ='WXBT';
      }else if(uiName=='原文引导'){
            pos          ='WXYWYD';
      }else if(uiName=='分隔线'){
            pos          ='WXFGX';
      }else if(uiName=='互推账号'){
            pos          ='WXHTZH';
      }else if(uiName=='我的样式'){
            pos          ='WXWDYS';
      }else if(uiName=='其他'){
            pos          ='WXQT';
      }
         var dialog = new UE.ui.Dialog({
            iframeUrl:this.options.UEDITOR_HOME_URL + '/demo/weixin.html?type='+pos,
            name:thePlugins,
            editor:this,
            title: '微信图文模板',
            cssRules:"width:740px;height:430px;",
            buttons:[
            {
                  className:'edui-okbutton',
                  label:'确定',
                  onclick:function () {
                     dialog.close(true);
                  }
            }]
         });
         dialog.render();
         dialog.open();
      }
};
};

function weixinButton(editor,uiName){
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName,{
      execCommand:function(){
            try {
                  editor.execCommand('weixin_template',uiName);
         } catch ( e ) {
            alert('打开模板异常'+e);
         }
      }
});
//创建一个button
var btn = new UE.ui.Button({
      //按钮的名字
      name:uiName,
      //提示
      title:uiName,
      //需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
      cssRules :'background-position:-902px -45px;width: 63px!important;',
      //点击时执行的命令
      onclick:function () {
         //这里可以不用执行命令,做你自己的操作也可
         editor.execCommand(uiName);
      }
});
//因为你是添加button,所以需要返回这个button
return btn;
}
UE.registerUI('微信图文模

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

实战-Ueditor扩展二次开发

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

猜你喜欢