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

标签: 前端  css  php

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 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%。那么显示的时候图片的最大宽度就是父容器的宽度了。

版权声明:本文为qq_43290318原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43290318/article/details/105415964