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、最终效果如下