百度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我們是認真的!

哦,不,寫示例我們是認真的!