UEditor富文本编辑框学习

Posted 2020-07-18 抖音的博客

1、首先需要引入CSS、JS

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

 

2、给UEditor一个ID

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

 

3、实例化UEditor

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

 

4、最终效果如下