富文本编辑器 UEditor上传图片(好用版)

最近在做富文本编辑器的功能,使用了百度的UEditor,综合的网上资料(很多不好用)然后自己总结了一下,分享给大家。

  1. 下载UEditor
  2. 下载Tomcat并进行配置
  3. 更改UEditor配置文件(重点)
  4. 使用nginx反向代理Tomcat(用来显示图片,本人喜欢这样用)

    1.下载UEditor

    传送门:http://ueditor.baidu.com/website/download.html
    我使用的是[1.4.3.3 Jsp 版本]、UTF-8版,大家下载即可,得到ueditor1_4_3_3-utf8-jsp.zip,解压得到utf8-jsp文件夹,将文件夹改名为ueditor
    这里写图片描述
    #### 2.下载Tomcat并配置
    配置Tomcat环境变量
    新建变量名:CATALINA_BASE,变量值:D:\Software\apache-tomcat-8.5.16
    新建变量名:CATALINA_HOME,变量值:D:\Software\apache-tomcat-8.5.16
    打开PATH,添加变量值:%CATALINA_HOME%\lib;%CATALINA_HOME%\bin

    3.更改UEditor配置文件

    将ueditor文件夹放入Tomcat下的webapp文件下,打开ueditor文件夹下的jsp文件,修改config.json文件,将”imagePathFormat”修改为”/static/page/upload/image/{yyyy}{mm}{dd}/{time}{rand:8}”,/static/page会成为被配置成nginx中的location。
    这里写图片描述

    4.使用nginx反向代理Tomcat

    下载nginx,并配置nginx.conf文件
    这里写图片描述

    好啦,启动Tomcat和nginx,我们来看看效果,注意看地址栏
    这里写图片描述
    我们来上传图片,注意看地址栏
    这里写图片描述
    使用图片地址来显示图片,注意看地址栏
    这里写图片描述

这样就完成了图片上传了,在html中就可以应用图片了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值