您的位置：首页 > 产品设计 > UI/UE

百度ueditor编辑器插件开发之对话框-移动微模板插件

2015-06-08 14:50 736 查看

现在市面上有很多款前端网页编辑器，百度ueditor凭借着国有化的，操作界面友好的特点，迅速地成为我现在一直在使用的编辑器。首先讲一下我的这个插件开发需要用到的技术知识点：

1.jsonp跨域ajax请求

2.easytemplate模板引擎

3.pagination前端js分页插件

4.ueditor插件对话框二次开发的基本方法

开发目标：

开发可供多个项目甚至是其它的项目使用的百度编辑器ueditor的插件，本地程序简易化配置。程序和数据放在远程数据库和服务器中。

插件目录：放到ueditor下的建立的一个新文件夹p目录下，其中包含main.js和uet.html两个文件。

其中main.js的文件内容如下：（此处文件是参照百度官方文档）

UE.registerUI('dialog',function(editor,uiName){

//创建dialog
var dialog = new UE.ui.Dialog({
//指定弹出层中页面的路径，这里只能支持页面,因为跟addCustomizeDialog.js相同目录，所以无需加路径
iframeUrl:editor.ui.UEDITOR_HOME_URL+"p/uet.html",
//需要指定当前的编辑器实例
editor:editor,
//指定dialog的名字
name:uiName,
//dialog的标题
title:"微信模板",
//指定dialog的外围样式
cssRules:"width:540px;height:400px;",
//如果给出了buttons就代表dialog有确定和取消
buttons:[
{
className:'edui-okbutton',
label:'确定',
onclick:function () {
dialog.close(true);
}
},
{
className:'edui-cancelbutton',
label:'取消',
onclick:function () {
dialog.close(false);
}
}
]});

//参考addCustomizeButton.js
var btn = new UE.ui.Button({
name:'dialogbutton' + uiName,
title:'dialogbutton' + uiName,
//需要添加的额外样式，指定icon图标，这里默认使用一个重复的icon
cssRules :'background-position: -500px 0;',
onclick:function () {
//渲染dialog
dialog.render();
dialog.open();
}
});
return btn;
}/*index 指定添加到工具栏上的那个位置，默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮*/);

uet.html文件内容如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台管理</title>
<link rel="stylesheet" href="http://tools.wiicms.com/skins/css/uet.css">
<script src="http://tools.wiicms.com/skins/js/jquery.js"></script>
<script src="http://tools.wiicms.com/skins/js/jquery.pagination.js"></script>
<script src="http://tools.wiicms.com/skins/js/easytemplate.js"></script>
<script src="/ueditor/dialogs/internal.js"></script>
</head>
<body>
<div id="tboxlist">
<div id="but_fresh">Fresh</div>
<ul id="listbox" class="uetbox">
</ul>
<div id="pagelist"></div>
</div>
<textarea name="template" id="template" cols="30" rows="10" style="display: none;">
<#list data as list>
<li tid="${list.id}"><img src="${list.titlepic}">
<div style="display:none;" id="uet-${list.id}">${list.code}</div>
</li>
</#list>
</textarea>
</body>
</html>
<script type="text/javascript">
var page = 0;
var x = "";
var template = "";
$(function () {
template = $("#template").val();
//编辑器插件开始
function uetTotal(){
$.ajax({
url:"http://tools.wiicms.com/index.php/ue/uetTotal",
type:"post",
dataType:"jsonp",
async:false,
jsonp:"jsoncallback",
success:function(data){
if(data.status=="success"){
$("#pagelist").pagination(data.total,{
items_per_page:9,
callback:function(cpage){
page=cpage;
uetList();
}
});
}else{
$("#listbox").html(data.msg);
}
}
});
}
function uetList() {
$.ajax({
url:"http://tools.wiicms.com/index.php/ue/uetList?page="+page,
type:"post",
dataType:"jsonp",
async:false,
jsonp:"jsoncallback",
success:function (data) {
x = easyTemplate(template, data.rows);
$("#listbox").html(x.toString());
$("#but_fresh").html("Fresh");
}
});
}

uetTotal();
$("#but_fresh").click(function () {
$(this).html("F....");
uetList();
});
var tstr = "";
var tid = 0;
$("#tboxlist ul li").live("click", function () {
tid = $(this).attr("tid");
tstr = $("#uet-" + tid).html();
editor.execCommand("inserthtml", tstr);
});
//编辑器插件结束
})
</script>

最终显示的效果是在ueditor的菜单操作栏最后加上一个附件的按钮图标，点击会弹出如下图：

最终显示的效果为：

调用的时候，只需要在引入config.js和ueditor之后再引入main.js即可。其中需要在uet.html中设置一下internal.js的正确引用位置。如有疑问请评论回复。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航