UEditor富文本编辑框学习

1、首先需要引入CSS、JS

 <!--富文本编辑框-->
 <link href="${pageContext.request.contextPath}/css/plugins/umEditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
 <link href="${pageContext.request.contextPath}/css/pl-style.css" rel="stylesheet">
 <!--富文本编辑框-->
 <script type="text/javascript"  src="${pageContext.request.contextPath}/js/plugins/umEditor/umeditor.config.js"></script>
 <script type="text/javascript"  src="${pageContext.request.contextPath}/js/plugins/umEditor/umeditor.min.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/js/plugins/umEditor/lang/zh-cn/zh-cn.js"></script>

2、给UEditor一个ID

 <div  style="width:100%;">
     <script type="text/plain" id="myEditor"  style="width:100%;">
     </script>
 </div>

3、实例化UEditor

 <script type="text/javascript">
 //实例化编辑器
 var um = UM.getEditor('myEditor');
 //清空内容
 um.execCommand('cleardoc');
 </script>

4、最终效果如下