百度umeditor富文本编辑器插件扩展

富文本编辑器在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>
}

 运营效果?

示例代码如何下载?

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

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

写BUG我们是认真的!

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