前台用UMeditor富文本框的形式存取内容

完成效果图如下：

可以去官网：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();