ueditor 1.4.3.3 Jsp 版本 运用到项目中

近期开发一个项目发布内容需求是富文本编辑框,最终决定选择ueditor。

项目是前后端分离的,前端是MUI用Hbuilder云打包封装的安卓app(由于管理员手机端编辑内容的不易,再加上前后端分离导致配置富文本框上传内容与展示的难度)。考虑到项目的紧迫性,最终决定在服务器端在写几个页面,用于管理登录与发布内容,前后端分离富文本框配置以后再做研究。

下面记录一下 ueditor 的配置步骤,以便下次使用:

1.下载 [1.4.3.3 Jsp 版本] utf-8:http://ueditor.baidu.com/website/download.html

2.下载到桌面解压,并把ueditor根目录上一级文件夹名重命名为 ue (我自己的习惯,后面会把整个ue文件夹复制到项目的WebContent根目录)

文件夹重命名

3.复制 ue 文件夹到项目根目录

复制ue到项目根目录

4.把 ueditor 所需要的jar包复制到 WEB-INF 目录下的 lib 中,我的复制过去就自动 Build Path 了 。

导入ueditor所需的jar包

5.然后再需要调用富文本框的 jsp 页面引入需要调用的资源(注意路径修改!)

<!-- ueditor 资源引入 -->
<script type="text/javascript" charset="utf-8" src="ue/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ue/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="ue/lang/zh-cn/zh-cn.js"></script>

6.在页面实例化 ueditor 编辑器

<script id="content" style="width:100%;height:370px;margin-top:15px;"> // 实例化的文本框
<script type="text/javascript">
var ue = UE.getEditor('content'); // 实例化编辑器
</script>

7.可以在ue目录下的 ueditor.config.js 文件中定义富文本框顶部小功能(toolbars),也可以通过实例化编辑器的时候传入 toolbars 参数

8.找到 ue/jsp/config.json,然后配置里面的上传文件参数,这里以上传图片为例,其它雷同

* 这里主要就是配置下面两项:

1)图片访问路径前缀:就放项目部署后的网址,我这个还在本地的tomcat中,后面打包项目之前还要修改一下;

2)图片上传保存路径,这个直接会在 tomcat 中的项目根目录创建下方的目录结构,并存储上传的图片,所以在Eclipse中没法看到这些目录和上传的图片。

ueditor上传图片配置

9.其它类型的上传配置与上雷同,这里就不介绍了。

——————————————-

之前配置 “Eclipse web项目自动发布到Tomcat”,所以eclipse最好也建立相应的上传文件目录,否认tomcat 此项目中的文件目录和文件会在每次自动到tomcat时被删除。


271 Clicks !

发表评论

电子邮件地址不会被公开。 必填项已用*标注