完成效果图如下:
可以去官网:https://ueditor.baidu.com/website/index.html
ue版本功能多,um版本日常功能都有,我下载的um把版本
1) 需要依赖static/Ueditor
<link href="${pageContext.request.contextPath}/static/Ueditor/themes/default/css/umeditor.css"
type="text/css" rel="stylesheet">
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/common/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="${pageContext.request.contextPath}/static/Ueditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
src="${pageContext.request.contextPath}/static/Ueditor/umeditor.min.js"> </script>
<script type="text/javascript" charset="utf-8"
src="${pageContext.request.contextPath}/static/Ueditor/lang/zh-cn/zh-cn.js"></script>
2)html里用<script>标签定义一个容器
<div>
<script id="myEditor" name="myEditor1" type="text/plain">
<p style="margin-left: 0px">一、产品介绍</p>
<p style="margin-left: 0px">二、主要功能点</p>
<p style="margin-left: 0px">三、可参考品</p>
<p style="margin-left: 0px">四、人员需求</p>
</script>
</div>
3)jquery的入口函数里实例化Ueditor
//实例化编辑器
var um = UM.getEditor('myEditor');
//其中myEditor是<script>标签定义的容器
4)如何设置它的初始化内容:
um.setContent(“新内容”);
5)如何获取Ueditor的内容
um.getContent();