码迷,mamicode.com
首页 > 其他好文 > 详细

UEditor富文本编辑框学习

时间:2016-05-31 18:36:17      阅读:316      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

 

UEditor富文本编辑框学习

标签:

原文地址:http://www.cnblogs.com/chenyablog/p/5546797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!