推广 热搜:   中国  参数  设备  公司  服务  未来  行业  企业  教师 

使用Ueditor上传图片到图片服务器(一)

   日期:2024-12-04     作者:caijiyuan    caijiyuan   评论:0    移动:http://sicmodule.glev.cn/mobile/news/11983.html
核心提示:网站的文章,通过运营平台来发布文章(图文消息),上传图片等。百度Ueditor比较成熟就采用了该技术&#x

网站的文章,通过运营平台来发布文章(图文消息,上传图片等。百度Ueditor比较成熟就采用了该技术,另外上传的图片是网站系统以及运营平台系统共享的,所以考虑搭建独立的图片服务器,以后也可以提供给公司其他服务使用,当做单独的文件服务器。

使用Ueditor上传图片到图片服务器(一)

关于Ueditor的接入,资料很多,我主要参考了:http://blog.csdn.net/Amayadream/article/details/47285209等博客,官网:http://fex.baidu.com/ueditor/。

(1:添加pom依赖

并没有引入ueditor的jar包,而是在源码的基础上进行了二次开发,有需要的可以找我要(链接:https://pan.baidu.com/s/1kXb17gz 密码:joom)。所有ueditor的统一入口Controller接口

具体看我提供的链接里的代码。

 

(2)将ueditor的静态代码js/css等放到项目里,需要配置的地方

ueditor.config.json——配置各种图片、文件路径名称,远程上传的话需要配置以下

ftp上传部分的代码,在我提供的包里,我提供的代码改一下相应的包名,可以直接使用。接下来的文章会讲解包里的部分代码。

imageUrlPrefix可以配置图片服务器的地址,如果是本地的话为空。Ueditor是自动将imageUrlPrefix+imagePathFormat作为完整的图片地址来使用的。

 

(3)配置

设置window.UEDITOR_HOME_URL

设置后台请求URL,所有Ueditor的统一请求地址,请求到我上边提到的Controller的统一入口,不同的请求包括:imageUpload/config等等。该配置是ueditor.config.js

 引入js文件

textarea部分

至此,该编辑器可以正常使用,可以写文字,文章中嵌入图片。图片会上传至远程服务器,图片地址是ueditor自动拼接:imageUrlPrefix+imagePathFormat,我是把整篇文章的内容(getContent方法,包括样式,图片地址存入数据一个text字段。网站的前端可以直接拿来展示。

Ueditor没有提供单独上传图片的功能,但是编辑器中有上传图片的功能,可以基于此,稍稍加点内容就可以实现了

JS代码以及HTML部分代码

image.js中做如下修改,找截图部分位置,加一句

至此,就可以单独使用上传图片的功能了。效果如下

 

 因为我对前端不太熟练,所以这篇文章写得不是很清晰。还请见谅。

本文地址:http://sicmodule.glev.cn/news/11983.html    歌乐夫 http://sicmodule.glev.cn/ , 查看更多
 
 
更多>同类行业资讯
0相关评论

新闻列表
企业新闻
推荐企业新闻
推荐图文
推荐行业资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2023001713号