UEditor---富文本编辑器基本使用

最近项目中要搞一个富文本编辑器的东西，网上搜了一下，使用百度的UEditor的比较多，所以没想太多就业使用了它，使用中踩了不少坑，今天做个记录。

首先下载UEditor：我这里下载的是JSP版本的。

解压后将文件夹拷贝到静态目录，我这里是maven项目，所以放在webapp/static下面了。大概的目录结构：

在JSP页面中的使用：

首先导入JS文件：

<script type="text/javascript" charset="UTF-8"
            src="<c:url value="/statics/js/ueditor/ueditor.config.js"/>"></script>
    <script type="text/javascript" charset="UTF-8" src="<c:url value="/statics/js/ueditor/ueditor.all.js"/>"></script>
    <script type="text/javascript" charset="UTF-8" src="<c:url value="/statics/js/ueditor/ueditor.parse.js"/>"></script>
    <script type="text/javascript" charset="UTF-8"
            src="<c:url value="/statics/js/ueditor/lang/zh-cn/zh-cn.js"/>"></script>

构造一个显示富文本编辑器的元素：我这里使用的是textarea。

<textarea id="postContent" name="postContent" style="width: 90%; height: 200px;"></textarea>

在JS中进行初始化

$(function(){
        bindEvent();
});

function bindEvent(){
    var ue = UE.getEditor('postContent',{autoHeightEnabled:false});
}

这样我们在页面上就能看到这个富文本编辑器了，如下：

本篇仅仅是简单的将富文本编辑器显示在页面上。