富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资料根据这些资料琢磨出了如果给umeditor添加插件,这个案例中将实现增加代码和附件插入.
准备工作:
1.umeditor下载:
https://github.com/fex-team/umeditor/releases
2.插件弹窗使用的是 layer:
http://layer.layui.com/?alone
如何创建插件?
第一步:我们在编辑器umeditor目录下创建一个plugins的文件夹,这里用来存放我们自定义的插件,如上图,我们定义了一个代码(code)以及附件(attachment)插件
第二步:创建plugins.js文件,这里用来封装我们插件的信息,代码如下
//定义插件容器
var plugins = new Array();
//注册插件
function registerPlugins() {
//添加代码插件
plugins['code'] = new function () {
//注册界面事件
var result = new Object();
result.CodeObj = {};
//注册指定事件
UM.registerUI('code',
function (name) {
var me = this;
var $btn = $.eduibutton({
icon: 'source',
click: function () {
var layIndex = layer.open({
type: 2,
title: '源代码',
maxmin: false,
shadeClose: true, //点击遮罩关闭层
area: ['620px', '380px'],
content: '/lib/umeditor/plugins/code/code.html',
btn: ['确定', '取消'],
btn1: function (index) {
if (result.CodeObj.codeContent != '') {
//把内容插入编辑器
var html = '<pre class="prettyprint"><code class="language-' + result.CodeObj.codeType + '">' + result.CodeObj.codeContent + '</code></pre>';
me.execCommand('insertHtml', html);
}
//关闭弹窗并且清空当次内容
layer.close(layIndex);
result.CodeObj = {};
//UM.getEditor('container').setContent(html, true);
},
btn2: function (index) {
//关闭当前弹窗 并且清空当前数据容器
layer.close(layIndex);
result.CodeObj = {};
}
});
},
title: '源代码'
});
me.addListener('selectionchange', function () {
//切换为不可编辑时，把自己变灰
var state = this.queryCommandState(name);
$btn.edui().disabled(state == -1).active(state == 1)
});
return $btn;
}
);
return result;
};
//添加代码插件
plugins['attachment'] = new function () {
//注册界面事件
var result = new Object();
result.DataObj = {};
//注册指定事件
UM.registerUI('attachment',
function (name) {
var me = this;
var $btn = $.eduibutton({
icon: 'attachment',
click: function () {
var layIndex = layer.open({
type: 2,
title: '附件',
maxmin: false,
shadeClose: true, //点击遮罩关闭层
area: ['600px', '320px'],
content: '/lib/umeditor/plugins/attachment/attachment.html',
btn: ['确定', '取消'],
btn1: function (index) {
if (result.DataObj.title != "" && result.DataObj.url != "") {
var html = '<div class="card" style="margin-bottom:5px;padding:0px;">';
html += '<div class="col-lg-12" style = "margin-top:10px;padding-left: 0px;">';
html += '<div class="col-lg-3" style="width:55px;">';
html += '<img src="/images/download.png" />';
html += '</div>';
html += '<div class="col-lg-8">';
html += '<div class="row">';
html += result.DataObj.title;
html += '</div>';
html += '<div class="row">';
html += '提取密码:<strong>' + (result.DataObj.password != "" ? result.DataObj.password:"")+'</strong>';
html += '</div>';
html += '</div>';
html += '<div class="col-sm-1">';
html += '<a href="' + result.DataObj.url + '" _href="' + result.DataObj.url + '" class="btn btn-link" target="_blank"> <i class="icon icon-download-alt icon-2x"></i></a>';
html += '</div>';
html += '</div>';
html += '</div>';
me.execCommand('insertHtml', html);
}
//关闭当前弹窗 并且清空当前数据容器
layer.close(layIndex);
result.DataObj = {};
},
btn2: function (index) {
//关闭当前弹窗 并且清空当前数据容器
layer.close(layIndex);
result.DataObj = {};
}
});
},
title: '附件'
});
me.addListener('selectionchange', function () {
//切换为不可编辑时，把自己变灰
var state = this.queryCommandState(name);
$btn.edui().disabled(state == -1).active(state == 1)
});
return $btn;
}
);
return result;
};
}第三步:因为例子中的插件是需要弹窗的,所以我们需要借助layer这个弹窗组建来实现,这里就以插入代码为说明吧
a.创建code文件夹
b.创建code.html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="/lib/jquery/jquery-3.2.0.min.js"></script> <link href="/style/css/zui.min.css" rel="stylesheet" /> </head> <body> <div class="container-fluid"> <form class="form-horizontal form-condensed" method="post"> <div class="form-group"> <div class="col-md-4" style="width:620px;margin-top:10px;"> <select class="form-control" onchange="MonitorTypeChanage()" style="height:30px;font-size:16px;" id="CodeType"> <option value="csharp">C#</option> <option value="javascript">JavaScript</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="SQL">SQL</option> </select> </div> </div> <div class="form-group"> <div class="col-md-12"> <textarea style="height:210px;width:600px;" oninput="MonitorContentsInput()" id="CodeContents" name="CodeContents" placeholder="请输入代码内容..."></textarea> </div> </div> </form> </div> <script type="text/javascript" src="code.js"></script> </body> </html>
c.创建code.js文文件
var result = {
codeType: 'csharp',
codeContent:''
}
window.onload = function () {
parent.plugins['code'].CodeObj = result;
}
//监听代码内容输入事件
function MonitorContentsInput() {
result.codeContent = html2Escape($("#CodeContents").val());
parent.plugins['code'].CodeObj = result;
}
//监听代码类型选择事件
function MonitorTypeChanage() {
result.codeType = $("#CodeType").val();
parent.plugins['code'].CodeObj = result;
}
function html2Escape(sHtml) {
return sHtml.replace(/[<>&"]/g, function (c) { return { '<': '<', '>': '>', '&': '&', '"': '"' }[c]; });
}d.弹窗组件中的功能写完了,我们需要在plugins.js文件中把刚刚增加的功能组件注册到umeditor对象中,完成这一步就完成一个插件功能,代码如下(plugins.js所有组件代码在第一步中)
plugins['code'] = new function () {
//注册界面事件
var result = new Object();
result.CodeObj = {};
//注册指定事件
UM.registerUI('code',
function (name) {
var me = this;
var $btn = $.eduibutton({
icon: 'source',
click: function () {
var layIndex = layer.open({
type: 2,
title: '源代码',
maxmin: false,
shadeClose: true, //点击遮罩关闭层
area: ['620px', '380px'],
content: '/lib/umeditor/plugins/code/code.html',
btn: ['确定', '取消'],
btn1: function (index) {
if (result.CodeObj.codeContent != '') {
//把内容插入编辑器
var html = '<pre class="prettyprint"><code class="language-' + result.CodeObj.codeType + '">' + result.CodeObj.codeContent + '</code></pre>';
me.execCommand('insertHtml', html);
}
//关闭弹窗并且清空当次内容
layer.close(layIndex);
result.CodeObj = {};
//UM.getEditor('container').setContent(html, true);
},
btn2: function (index) {
//关闭当前弹窗 并且清空当前数据容器
layer.close(layIndex);
result.CodeObj = {};
}
});
},
title: '源代码'
});
me.addListener('selectionchange', function () {
//切换为不可编辑时，把自己变灰
var state = this.queryCommandState(name);
$btn.edui().disabled(state == -1).active(state == 1)
});
return $btn;
}
);
return result;
};如何使用?
准备工作准备好以后我们新建一个页面,引入相关的样式以及JS文件,代码如下:
@{
ViewData["Title"] = "umeditor富文本编辑器插件扩展案例";
}
@section Style{
<link href="~/lib/umeditor/themes/default/css/umeditor.min.css" rel="stylesheet" />
}
<div class="container-fixed-md">
<textarea style="height:300px;width:700px;" id="Contents" name="Contents" placeholder=""></textarea>
</div>
@section Scripts{
<script src="~/lib/layer/layer.min.js"></script>
<script src="~/lib/umeditor/umeditor.config.js"></script>
<script src="~/lib/umeditor/umeditor.min.js"></script>
<!--自定义插件文件导入-->
<script src="~/lib/umeditor/plugins/plugins.js"></script>
<script type="text/javascript">
var um = UM.getEditor('Contents', {
toolbar: [
' bold italic underline | insertorderedlist removeformat |',
'link unlink | emotion image attachment code',
'| fullscreen', 'formula'
]
});
//注册插件
registerPlugins();
</script>
}运营效果?
推荐阅读
最新回复 (0)
站点信息
- 文章2313
- 用户1336
- 访客11753564
每日一句
October ends with magic and candy.
十月以魔法和糖果收尾。
十月以魔法和糖果收尾。
