ueditor增加功能

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

步骤如下:

第一步 添加按钮描述

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

二 添加按钮 和 对应样式

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

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

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

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

<script type="text/javascript" charset="utf-8" src="../utf8-jsp/ueditor.all.js"> </script>
ueditor.css中增加如下内容:
.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对应路径


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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值