实战-Ueditor扩展二次开发

admin · 发表于 2015-9-24 16:16:38

第一部分开发前期准备

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('微信图文模板',weixinButton);

复制代码

实战-Ueditor扩展二次开发

相关帖子