富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资料根据这些资料琢磨出了如果给umeditor添加插件,这个案例中将实现增加代码和附件插入.
准备工作:
1.umeditor下载:
/fex-team/umeditor/releases
2.插件弹窗使用的是 layer:
/?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 = '
' + result.CodeObj.codeContent + '
';
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 = '
';
html += '
';
html += '
';
html += '';
html += '
';
html += '
';
html += '
';
html += result.DataObj.title;
html += '
';
html += '
';
html += '提取密码:' + (result.DataObj.password != "" ? result.DataObj.password:"")+'';
html += '
';
html += '
';
html += '
';
html += '';
html += '
';
html += '
';
html += '
';
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文件
C#
JavaScript
HTML
CSS
SQL
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 = '
' + result.CodeObj.codeContent + '
';
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{
}
@section Scripts{
var um = UM.getEditor('Contents', {
toolbar: [
' bold italic underline | insertorderedlist removeformat |',
'link unlink | emotion image attachment code',
'| fullscreen', 'formula'
]
});
//注册插件
registerPlugins();
}
运营效果?
示例代码如何下载?
码云下载:/dotnet_51core/aspnetcoremvc
放一张示例截图(其他几个示例的博文会在这个月内全部更新上去):
写BUG我们是认真的!
哦,不,写示例我们是认真的!
使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在 M ...
百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
关于百度Editor富文本编辑器 自定义上传位置
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
JSP嵌入ueditor、umeditor富文本编辑器
一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...
vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
vue-quill-editor 富文本编辑器插件介绍
Iblog项目中博文的文本编辑器采用了vue-quill-editor插件,本文将简单介绍其使用方法. 引入配置 安装模块 npm install vue-quill-editor --save in ...
随机推荐
【hive】——Hive sql语法详解
Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...
reverse-XNUCA-babyfuscator
上一次线上赛的一道题目 链接:/s/1qY9ztKC 密码:xlr2 这是一道代码混淆的题目,因为当时还不知道angr这样一个软件,所以我就用了自己的一种思路 ...
jQuery ajax - getScript() 方法
通过 AJAX 请求来获得并运行一个 JavaScript 文件: HTML 代码: Run
YTU 2987: 调整表中元素顺序(线性表)
2987: 调整表中元素顺序(线性表) 时间限制:1 Sec内存限制:2 MB 提交:1解决:1 题目描述 若一个线性表L采用顺序存储结构存储,其中所有元素都为整数.设计一个算法,将所 ...
kiss框架学习
#parse("$!jc.skinpath/exam/cart.ascx") var CategoryId = "$!this.loadCategory_combo(). ...
hdu1038
#include #define P 3.1415927 #define toFeet(x) x/12.0 #define toMiles(x) x/5280.0 in ...
SpringMVC详解(一)------入门实例
本系列教程我们将详细的对SpringMVC进行介绍,相信你在学完本系列教程后,一定能在实际开发中运用自如. 1.什么是 SpringMVC ? 在介绍什么是 SpringMVC 之前,我们先看看 Sp ...
ubuntu 下当前网速查看
ubuntu下用ethstatus可以监控实时的网卡带宽占用.这个软件能显示当前网卡的 RX 和 TX 速率,单位是Byte 一.安装 ethstatus 软件 #sudo apt-get insta ...
linux下安装jenkins
我们不用离线安装方式 第一步.必须验证java环境 第二步.我们这里使用yum命令进行在线安装,使用service命令进行启动 1.wget -O /etc/yum.repos.d/jenkins.r ...
Android——单例模式
详细的各种模式 /android-419145.htm /link?url=f3yjQ6YvslvHcWJLb ...
