1.下载umeditor压缩包
2.放在webContent包下
3.创建index.jsp,引入以下文件
<link href="${ctx }/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="${ctx }/umeditor/third-party/jquery.min.js"></script> <script type="text/javascript" src="${ctx }/umeditor/third-party/template.min.js"></script> <script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.min.js"></script> <script type="text/javascript" src="${ctx }/umeditor/lang/zh-cn/zh-cn.js"></script>
index.jsp具体内容：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link href="${ctx }/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${ctx }/umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx }/umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="${ctx }/umeditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var um = UM.getEditor('myEditor');
<%--
var um = UM.getEditor('myEditor', {
initialFrameWidth:'70%',
initialFrameHeight:300,
//autoHeightEnabled:false,
toolbar:[
'undo redo | emotion horizontal forecolor backcolor | bold italic underline strikethrough | superscript subscript | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify |',
'link unlink fullscreen'
]
});
--%>
});
</script>
</head>
<body>
<script type="text/plain" id="myEditor" ></script>
</body>
</html>
4.全部显示 var um = UM.getEditor('myEditor'); 显示如下：
5.根据需要显示必要的工具，这样写
var um = UM.getEditor('myEditor', { initialFrameWidth:'70%', initialFrameHeight:300, //autoHeightEnabled:false, toolbar:[ 'undo redo | emotion horizontal forecolor backcolor | bold italic underline strikethrough | superscript subscript | removeformat |', 'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' , '| justifyleft justifycenter justifyright justifyjustify |', 'link unlink fullscreen' ] });
注意遇到问题：注释使用<!-- -->是显示不了报错的，要使用<%-- --%>注释才能正常显示
