UEditor 自定义上传 远程服务器 Jsp Java

终于是搞定了UEditor自定义上传...

上班的时间写这个,不知道会不会被骂死...

现在公司正在做的一个项目,需要用到HTML编辑器,在UEditor之前,使用的是Ckeditor+Ckfinder。

CK这个编辑器和UEditor一样,都是首次使用,所以在网上也翻了写资料,发现大家都只是本地服务器上传。

但项目有个要求:图片文件,需要上传至图片服务器,需要使用的时候也从图片服务器上下载,这样可以相对减轻web服务器的压力,也使文件资源更安全,使用更灵活。

那么需求提出来,就开始做了,CK是国外的富文本编辑器,找了很多资料,都是English看的是脑袋发胀(大家英语应该学好)。

后面才看到一段官方的回答,外国码友提问的,大意是:ck是否支持上传到远程服务器。得到的官方回答是不支持,需要自己去重写某东西。

在寻找CK资料的时候有瞄到UEditor。

虽然有自己扩展了CK的图片上传,但是有两个问题:

1、扩展的图片上传,使用图片上传,它不去调用设置的controller(框架是SpringMVC),直接把文件上传到本地服务器;

2、直接修改文本编辑器本身自带的图片上传功能,从服务器上获取图片列表后,不知道如何把图片嵌入文本编辑器中(因为需要直接做一个页面来展示这些图片);

 

这也是最终放弃的原因,不知道哪里没有配置,或者配错,也找不到类似资料,再研究下去太花时间,于是在看到官方回答后,决定放弃。

上周五下午就下载了UEditor,但是本人有个坏习惯,就是不喜欢看文档,然后就开始瞎搞。

昨天在UEditor群里问了点问题,但似乎都没有人做和一样的需求,找了很多资料也都只是简单的本地服务器上传。

那么现在把实现的方式介绍给大家,使用的是最新的UEditor版本1.4.3.1,建议大家去官网下载。

1、下载UEditor后,解压,把它放到工程里,还有它的Jar包也要放进去,1.4.3.1结构是这样的


Jar包放在WEB-INF/lib下面


===================================

A、先讲前端

===================================

2、在你的全局脚本jsp中或者你需要用UEditor的jsp中引入UEditor的js

<scripttype="text/javascript"charset="utf-8"src="${yourPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"src="${yourPath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript"charset="utf-8"src="${yourPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

这时候已经可以开始使用UEditor了

3、在Jsp中使用,在你需要放编辑器的地方插入下面的语句


第一行script就是UEditor面板,你只需要修改name就行,对应的是表单的name(此时表单中就不需要设置了,它就代表你表单的那一项)

第二行脚本域里面,实际上就是自定义上传的核心,var ue = UE.getEditor('editor'); 就是创建面板用的,一定要有;如果不使用自定义上传,那么下面的也就不需要了,只要创建面板那一句就够了。

简单介绍:

UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 是用来获取Action的,照写就行,然后就是下面的 UE.Editor.prototype.getAc

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值