【uEditor】引入富文本编辑器uEditor时，上传图片失败的原因

uEditor

uEditor是百度开发的一款开源的富文本编辑器。官网地址：http://ueditor.baidu.com/website/

使用教程请看官网文档

前言

如何引入我就不赘述了，官网有详细教程。我使用的是php版，我来说一下我第一次使用uEditor，部署到服务器上遇到的问题。

1、上传图片失败

2、显示的时候大图片超出父容器

解决

配置文件：ueditor/php/config.json

 

1、上传图片失败

（1）可能是权限不够，ueditor无法创建目录

假设我的图片保存在：【项目目录】/uploaded/ueditor/...

尝试1：将uploaded目录的属主和所属组改为apache

chown -R apache:apache 目录

尝试2：将uploaded目录的权限修改为777

chmod -R 777 目录

（2）上传路径错误

在Win10下面，图片存储的绝对路径可以写为：/项目名/uploaded/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}

其中的第一个 “/” 是指 www目录！！！

 

在Linux下，我把图片存储的绝对路径写为：/var/www/项目名/uploaded/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}

发现图片上传失败，目录的权限我已经改过了，还是不行。

最后通过打印出上传图片的绝对路径，发现是：

显然路径错了。。正确的应该改为：/uploaded/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}

 

总之，注意在window和linux下面的路径是不一样的，可以去试一下。

怎么把上传图片的路径显示出来？

在ueditor/php/Uploader.class.php中,

 

2、显示富文本内容时，大图超出父容器

原本我想通过jQuery控制，当图片内容超出父容器，就将图片的宽度置为父容器的宽度。但问题是jQuery的文档就绪函数，不是等到页面的全部图片加载才去执行。。所以有一定几率没作用

最好的方式就是通过CSS控制

设置父容器的图片的max-width属性为100%，即max-width: 100%。那么显示的时候图片的最大宽度就是父容器的宽度了。