实战-Ueditor扩展二次开发
第一部分 开发前期准备
第二部分 扩展增加按钮DEMO
<!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>
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
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('微信图文模
实战-Ueditor扩展二次开发相关推荐
- 基于百度编辑器Ueditor的二次开发
基于百度编辑器Ueditor的二次开发 官网下载 基本配置 简化后端配置,不请求后端配置项 后端接口规范 修改图片上传 说明及修改 新增按钮及弹窗(自定义附件上传) 按钮文案修改 在业务开发的时候,曾 ...
- hive server2源码地址在哪_实战搭建Thinkphp二次开发威客RW平台源码粉丝关注投票发布系统...
实战搭建Thinkphp二次开发威客RW平台源码粉丝关注投票发布系统 运行环境:php5.6+需要开启伪静态 安装步骤: 上传解压,运行目录指向 public 修改/app/database.php ...
- C#实战之CAD二次开发001：CAD和C#的环境配置
前言 本博文主要介绍利用C#对CAD进行二次开发,结合了ObjectARX功能强大的特点和VBA易用的特点,通过实战项目对C#开发CAD进行一个简要的介绍. 1.CAD的安裝 首先我们需要安装CAD, ...
- C#实战之CAD二次开发006：与python进行Socket传输文件
前言 前面介绍了与CAD相关的一些功能,本期介绍一下C#和python如何通过socket通信来进行文件的传输,建议不了解Socket的同学先去了解一下socket的通讯原理,这样看起来不会云里雾里的 ...
- C#实战之CAD二次开发003：插入文字和插入图块
前言 上期我们介绍了如何利用C#在CAD中绘制直线和圆,这期我们介绍一下CAD中两个比较重要的功能,插入文字和插入图块,在CAD中插入文字主要是单行文字和多行文字,插入块主要有内部图块和外部图块.本文 ...
- C#实战之CAD二次开发004：插入尺寸标注
前言 上期我们介绍了CAD中插入文字和插入图块两个功能,这期我们继续介绍一个比较常用的功能--标注尺寸,标注尺寸是我们在绘图的时候经常用到这个功能. 插入标注 CAD中的标注形式有很多种,例如水平标注 ...
- UEditor 如何进行二次开发
背景 UEditor虽然功能众多,但对于广大开发者来说,还是有很多定制化的功能需求,如果都靠UEditor团队自己开发那是不现实的,这时就需要广大开发者在UEditor的基础上自己开发定制功能.但在之 ...
- 关于K3wise系列的二次开发
关于K3wise系列的二次开发 今天收到反馈说PAD端做的外购入库单据没有[含税金额]数据 经分析不管在PAD端还是PC端添加库存单据都会执行 p_UpdateBillRelateData 存储过程 ...
- Spring Boot + vue-element 开发个人博客项目实战教程（二十五、项目完善及扩展(前端部分)）
⭐ 作者简介:码上言 ⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程 ⭐专栏内容:零基础学Java.个人博客系统 ⭐我的文档网站:http://xyhwh- ...
最新文章
- 2019全球AI人才分布图：美国占44%，中国人才净流入
- junit5_使用junit做其他事情
- 【Henu ACM Round#17 D】Hexagons!
- 前端html5的框架有哪些,10大html5前端框架
- 每个开发人员都应该知道的 15 个 IntelliJ IDEA 快捷方式
- 使用ueditor实现多图片上传案例——DaoImpl层（BaseDaoUtilImpl）
- SQLAllocStmt与SQLFreeStmt
- JDK8和JDK1.8有何区别
- this compilation unit is not on the build of a java project
- lineNumber: 8; columnNumber: 128; cvc-elt.1: 找不到元素 'beans' 的声明
- java程序员期望薪资_11月程序员平均薪资达14327元，薪资最高的居然不是JAVA？
- java byte[]如何移动位置_《北京尚学堂学习》——java基础
- java eclipse参考文献_2019-2020年java毕设论文参考文献.doc
- MySQL命令执行脚本文件
- IReport+JasperReport系列的坑（二）CloumnFooter与Detail之间有缝隙
- md5验证文件上传,确保信息传输完整一致
- 超链接 与众不同的鼠标滑过超链接下划线动画效果
- aardio - 【库】libxl库，一个dll操作excel
- php fpm配置和php.ini,php安装完后配置php.ini和php-fpm.conf
- Java oss 上传图片视频