准备工作:

1.umeditor下载:

https://github.com/fex-team/umeditor/releases

2.插件弹窗使用的是 layer:

http://layer.layui.com/lone

如何创建插件/p>

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 = ‘

‘;

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;

};

如何使用/p>

准备工作准备好以后我们新建一个页面,引入相关的样式以及JS文件,代码如下:

@{

}

@section Style{

}

@section Scripts{

var um = UM.getEditor(‘Contents’, {

toolbar: [

‘ bold italic underline | insertorderedlist removeformat |’,

‘link unlink | emotion image attachment code’,

‘| fullscreen’, ‘formula’

]

});

//注册插件

registerPlugins();

}

运营效果/p>

示例代码如何下载/p>

码云下载:https://gitee.com/dotnet_51core/aspnetcoremvc

放一张示例截图(其他几个示例的博文会在这个月内全部更新上去):

写BUG我们是认真的!

哦,不,写示例我们是认真的!

随机推荐

【hive】——Hive sql语法详解

Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 …

reverse-XNUCA-babyfuscator

上一次线上赛的一道题目 链接:http://pan.baidu.com/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——单例模式

详细的各种模式 http://mobile.51cto.com/android-419145.htm http://wenku.baidu.com/linkrl=f3yjQ6YvslvHcWJLb …