实战-Ueditor扩展二次开发

第一部分 开发前期准备   

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"/>
    <!--UEditor-->
    <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('微信图文模

你可能感兴趣的:(java,扩展,jeecg,开源社区,jeewx)