ueditor增加功能

比眉伴天荒 2023-05-29 05:26 20阅读 0赞

ueditor带有添加Iframe的功能，但是我需要将输入的url修改为下拉框。

步骤如下：

# 第一步 添加按钮描述 #

找到ueditor.config.[js][]文件中的toolbars数组，增加一个“watermark”字符串，然后找到labelMap数组，对应着添加一个labelMap，labelMap用于鼠标移上按钮时的提示。红框内为新增内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70][]

二 添加按钮 和 对应样式

找到你所引用的ueditor.all.js文件中的btnCmds数组，在其中同样增加一个"board"字符串。

首先需要确定自己引用的ueditor.all.js文件。

如果引用的是 压缩过的 ueditor.all.min.js文件，则需要修改ueditor.all.js文件后压缩一遍，把新的ueditor.all.min.js文件内容替换进去。

这里为了方便 我们直接引用 ueditor.all.js文件，如下:

.edui-default .edui-for-board .edui-dialog-content {
        width: 350px;
        height: 200px;
        overflow: hidden;
    }
    .edui-default .edui-toolbar .edui-for-board .edui-icon {
        background-image: url("../images/charts.png");
    }

ueditor.all.js中增加的内容如下：声明jsp对应路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70 1][]

![20191104201830737.png][]

UE.plugins['board'] = function() {
       var me =this;
        function deleteIframe(){
            me._iframe && delete me._iframe;
        }
    
        me.addListener("selectionchange",function(){
            deleteIframe();
        });
    
    };

board.jsp的内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript" src="../internal.js"></script>
        <script type="text/javascript" src="../../../fe-res/js/jquery.min.js"></script>
    
        <script type="text/javascript" >
            function loadboards(){
                $.ajax({
                    url: "../../../reportset/getboards.action",
                    type: 'POST',
                    data: {content:JSON.stringify()},
                    dataType: 'JSON',
                    timeout: 30000,
                    success: function (result) {
                        var modelList = result.boardList;
                        if(modelList && modelList.length != 0) {
                            for (var i = 0; i < modelList.length; i++) {
                                var option = "<option value=\"" + modelList[i].absoluteUrl + "\"";
                                option += ">" + modelList[i].boardName + "</option>"; //动态添加数据
                                $("select[name=boardUrl]").append(option);
                            }
                        }
                    },
                    error: function (result) {
                    }
                });
    
            }
    
        </script>
    
        <style type="text/css">
            .warp {width: 320px;height: 153px;margin-left:5px;padding: 20px 0 0 15px;position: relative;}
            #url {width: 290px; margin-bottom: 2px; margin-left: -6px; margin-left: -2px\9;*margin-left:0;_margin-left:0; }
            .format span{display: inline-block; width: 58px;text-align: center; zoom:1;}
            table td{padding:5px 0;}
            #align{width: 65px;height: 23px;line-height: 22px;}
        </style>
    </head>
    <body onload="loadboards()">
    <div class="warp">
        <table width="300" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2" class="format">
                    <span><var id="lang_input_address"></var></span>
                    <select id="url"  name="boardUrl"  style="width: 150px">
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="format"><span><var id="lang_input_width"></var></span><input style="width:200px" type="text" id="width"/> px</td>
    
            </tr>
            <tr>
                <td colspan="2" class="format"><span><var id="lang_input_height"></var></span><input style="width:200px" type="text" id="height"/> px</td>
            </tr>
            <tr>
                <td><span><var id="lang_input_isScroll"></var></span><input type="checkbox" id="scroll"/> </td>
                <td><span><var id="lang_input_frameborder"></var></span><input type="checkbox" id="frameborder"/> </td>
            </tr>
    
            <tr>
                <td colspan="2"><span><var id="lang_input_alignMode"></var></span>
                    <select id="align">
                        <option value=""></option>
                        <option value="left"></option>
                        <option value="right"></option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        var iframe = editor._iframe;
        if(iframe){
            $G("url").value = iframe.getAttribute("src")||"";
            $G("width").value = iframe.getAttribute("width")||iframe.style.width.replace("px","")||"";
            $G("height").value = iframe.getAttribute("height") || iframe.style.height.replace("px","") ||"";
            $G("scroll").checked = (iframe.getAttribute("scrolling") == "yes") ? true : false;
            $G("frameborder").checked = (iframe.getAttribute("frameborder") == "1") ? true : false;
            $G("align").value = iframe.align ? iframe.align : "";
        }
        function queding(){
            var  url = $G("url").value.replace(/^\s*|\s*$/ig,""),
                width = $G("width").value,
                height = $G("height").value,
                scroll = $G("scroll"),
                frameborder = $G("frameborder"),
                float = $G("align").value,
                newIframe = editor.document.createElement("iframe"),
                div;
            if(!url){
                alert(lang.enterAddress);
                return false;
            }
            newIframe.setAttribute("src",/http:\/\/|https:\/\//ig.test(url) ? url : "http://"+url);
            /^[1-9]+[.]?\d*$/g.test( width ) ? newIframe.setAttribute("width",width) : "";
            /^[1-9]+[.]?\d*$/g.test( height ) ? newIframe.setAttribute("height",height) : "";
            scroll.checked ?  newIframe.setAttribute("scrolling","yes") : newIframe.setAttribute("scrolling","no");
            frameborder.checked ?  newIframe.setAttribute("frameborder","1",0) : newIframe.setAttribute("frameborder","0",0);
            float ? newIframe.setAttribute("align",float) :  newIframe.setAttribute("align","");
            if(iframe){
                iframe.parentNode.insertBefore(newIframe,iframe);
                domUtils.remove(iframe);
            }else{
                div = editor.document.createElement("div");
                div.appendChild(newIframe);
                editor.execCommand("inserthtml",div.innerHTML);
            }
            editor._iframe = null;
            dialog.close();
        }
        dialog.onok = queding;
        $G("url").onkeydown = function(evt){
            evt = evt || event;
            if(evt.keyCode == 13){
                queding();
            }
        };
        $focus($G( "url" ));
    
    </script>
    </body>
    </html>

en.js中增加内容：

board:{
            'static':{
                'lang_input_address':'Address：',
                'lang_input_width':'Width：',
                'lang_input_height':'height：',
                'lang_input_isScroll':'Enable scrollbars：',
                'lang_input_frameborder':'Show frame border：',
                'lang_input_alignMode':'Alignment：',
                'align':{title:"Alignment", options:["Default", "Left", "Right", "Center"]}
            },
            'enterAddress':'Please enter an address!'
        },

zh-cn.js中增加内容如下：

'board':{
            'static':{
                'lang_input_address':'地址：',
                'lang_input_width':'宽度：',
                'lang_input_height':'高度：',
                'lang_input_isScroll':'允许滚动条：',
                'lang_input_frameborder':'显示框架边框：',
                'lang_input_alignMode':'对齐方式：',
                'align':{title:"对齐方式", options:["默认", "左对齐", "右对齐", "居中"]}
            },
            'enterAddress':'请输入地址!'
        },

jsp中请求的后台controller

@RequestMapping(value="/reportset/getboards.action")
        @ResponseBody
        public JSONObject grantResource(String content) {
            JSONObject jsonObject = new JSONObject();
            try {
                List<DashboardBoard> dashboardBoards = dashboardService.listUserDashboardsWithUrl(RSBIUtils.getLoginUserInfo().getUserId());
                jsonObject.put("status", "ok");
                jsonObject.put("boardList", dashboardBoards);
            } catch(Exception ex) {
                logger.warn("更新授权信息出错", ex);
                jsonObject.put("status", "error");
                jsonObject.put("message", "更新授权信息出错");
            }
    
            return jsonObject;
        }

参考：[https://blog.csdn.net/zzq900503/article/details/77050823][https_blog.csdn.net_zzq900503_article_details_77050823]

[js]: http://lib.csdn.net/base/javascript
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104195314538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104201702492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5,size_16,color_FFFFFF,t_70
[20191104201830737.png]: https://img-blog.csdnimg.cn/20191104201830737.png
[https_blog.csdn.net_zzq900503_article_details_77050823]: https://blog.csdn.net/zzq900503/article/details/77050823