一、效果如下
二、把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