在JavaWeb项目中添加富文本编辑器------UEditor的使用

一、 目的：在 jsp 页面引用 UEditor 编辑器
二、步骤：

1. 在链接: UEditor下载.中选择下载
   

2. 将下载下来的的压缩包解压获得的文件夹拷贝到JavaWeb项目下的WebContent（Eclipse开发环境中）
   

3. 将导入到项目中的文件夹 utf-8 中的 jsp 文件夹中的 lib 文件夹中的 jar 导入到项目中的 lib 文件夹中，记得 bilder path
   

4. 在浏览器地址栏输入：http://localhost/项目名/utf8-jsp/index.jsp， 若出现如下页面，说明基本配置完成
   

5. 配置资源所在根路径，配置文件路径 /utf8-jsp/ueditor.all.min.js ：
   

6. 配置图片上传的路径，配置文件的路径为 /utf8-jsp/jsp/config.json：将红笔圈出的位置替换成你的项目名称

7. 在 jsp 页面中显示 UEditor 编辑器：
①在要显示的 UEditor 编辑器的 jsp 页面上引入以下 js 文件：

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/utf8-jsp/ueditor.config.js"></script>  
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/utf8-jsp/ueditor.all.min.js"> </script>  
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/utf8-jsp/lang/zh-cn/zh-cn.js"></script>  

content 是文本域的名字

<script type="text/javascript">
    var ue = UE.getEditor('content');
    </script>

②把需要显示 UEditor 编辑器的代码添加到相对应的地方：

<textarea name="content" id="content" style="width: 916px; height: 400px; margin: 0 auto;"></textarea> 

三、结果截图：