umeditor的使用教程

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'
                ]
    });

注意遇到问题：注释使用是显示不了报错的，要使用<%-- --%>注释才能正常显示