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

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

  1. 在链接: .中选择下载
  2. 将下载下来的的压缩包解压获得的文件夹拷贝到JavaWeb项目下的WebContent(Eclipse开发环境中)
  3. 将导入到项目中的文件夹 utf-8 中的 jsp 文件夹中的 lib 文件夹中的 jar 导入到项目中的 lib 文件夹中,记得 bilder path
  4. 在浏览器地址栏输入: 若出现如下页面,说明基本配置完成
  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>
经验分享 程序员 微信小程序 职场和发展