使用ueditor文本编辑器

一、效果如下

二、把ueditor添加到项目里

二、页面代码如下

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="utf-8">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
</head>
<body style="text-align: center">
<a id="ue"><h1>click me</h1></a>
</body>
<script type="text/javascript">
    $("#ue").click(function(){
        r_area = getCalcWin('600','600');
        var indexs = layer.open({
            type: 2,//iframe 类型
            title: "不小心弹出来了",
            shade: 0.3,//遮罩层系数
            scrollbar: false,//滚动条，后期可能会改
            anim: 5,//打开动画
            content: ["layer", 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            area: r_area,//iframe 页面大小
            id: "test",//iframe 页面ID
            resize: false,//不允许拉伸
            success: function (layero, index) {// 弹出成功之后，隐藏最小化按钮
            },
            cancel: function () {//取消事件
            },
            end: function () {//层销毁事件
            }
        });
    });
    function getCalcWin(p_width,p_height){
        var r_width = p_width;
        var r_height = p_height;
        //获取iframe窗口宽度
        g_win_width = $(window.top.document).find("#availWidth").val();

        //获取iframe窗口高度
        g_win_height = $(window.top.document).find("#availHeight").val();

        if(parseInt(g_win_width) < parseInt(p_width)){
            r_width = g_win_width * 0.95;
        }

        if(parseInt(g_win_height) < parseInt(p_height)){
            r_height = g_win_height * 0.95 ;
        }

        var r_arr = [];
        r_arr.push(r_width+'px');
        r_arr.push(r_height+'px');
        return r_arr;
    }
</script>
</html>

弹出页面代码（文本编辑器）

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="utf-8">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="utf-8" src="js/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<div type="text/plain" id="content" style="width:100%;height:400px;" />
</body>
<script type="text/javascript">
    var ue = UE.getEditor('content', {
        toolbars : [['Source', 'Undo', 'Redo', 'cleardoc', '|', 'Bold', 'forecolor', 'backcolor', '|', 'fontfamily', 'fontsize', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',  'date', 'time', 'spechars', '|', 'preview']],
        //focus时自动清空初始化时的内容
        autoClearinitialContent : true,
        //关闭字数统计
        wordCount : false,
        elementPathEnabled : false,
        autoHeightEnabled:false,
        imagePopup:false,
    });
</script>
</html>

ueditor文本编辑器和layer弹窗文件：https://download.csdn.net/download/qq_15260315/10523931

使用ueditor文本编辑器

猜你喜欢