正文

xheditor编辑器上传图片

红尘练  红尘练  2022-10-14  677

关键词：

之前在用csdn的时候，觉得他们家的编辑器挺好用，精美，简洁，大方，功能强大。最近自己的项目也要用到编辑器，我就想起了xheditor。

好多大网站都用到它~好棒！

我把xheditor用于文章模块，添加和修改文章，然后保存到数据库中，用text类型存储。编辑文章避免不了图文混排，那就要考虑到如何处理图片。

主要有两种方案：

把图片上传到服务器中，然后把图片的路径保存到数据库
用base64编码图片，然后再把编码后长长的一串保存到数据库中

这里主要跟大家说说第一种，因为后期还要用到正则匹配文章中的图片。

这里要注意几点：

1.默认是用html5上传

由于对html5不熟悉，导致上传的时候老是出现“上传接口出现错误的提示”；而提示原因是

“Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version。”

如下所示：

解决的办法就是把 php.ini 中的 always_populate_raw_post_data 修改为-1 就行了；

详细参考：http://www.cnblogs.com/luoyangcn/p/4309838.html

如果你不想要html5上传，在初始化的时候，把html5Upload改为false就行了,我这里就没有用html5上传；

配置好以后，后台就可以接收到上传的图片啦~

后台处理程序可以参考官方给出的demo

注意表单文件域的name 为 filedata

2.图片base64编码

xheditor是一个非常好的文本编辑器，你可以上传图片，也可以粘贴图片

粘贴图片的话，xheditor会自动帮你用 base64 编码，所以这时候你存到数据库的不是图片路径，我并不想把一长串东西保存到数据库里面，怎么做呢？

在这，把 cleanPaste 改为3，这样，就不能粘贴图片了。当然，这个cleanPaste的意思是清除粘贴的HTML代码，看看一下解析你就懂了。

参数：0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word
说明：若网站应用需要保留更多的Word样式效果，请设置此值为1，不过产生的HTML代码体积会大大增大
备注：1.1.4版本中新变更，原为wordDeepClean和forcePasteText两个参数

最后注意一点，xheditor 会把内容中的大于号，小于号，双引号，单引号这些通通转化为实体字符，相当于 php 中的 htmlspecialchars() 函数

参考链接：https://www.cnblogs.com/estellez/p/3977196.html

xheditor实现ctrl+v粘贴word图片并上传

tinymce是很优秀的一款富文本编辑器，可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%8... 查看详情

xheditor实现ctrl+v粘贴图片并上传word粘贴带图片

富文本编辑器xheditor支持从word复制粘贴保留格式和图片的插件

由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其... 查看详情

关于xheditor粘贴图片自动上传

Chrome+IE默认支持粘贴剪切板中的图片，但是我要发布的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

这些例子的特效很炫，感觉的同学可以研究学习一下

...target_desc.php?id=02bkjbbkj水滴导航选项卡栏目制作xheditor文本编辑器插件制作html编辑器使用代码点击》xheditor文本编辑器插件制作html编辑器使用代码中文版xheditor文本编辑器插件制作xheditor编辑器使用_xheditor编辑器上传图片_xheditor编... 查看详情

从word中复制图片到xheditor编辑器中

...息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本编辑器里面方法一：工具/原料百度doc任意富文本编辑器，以UEDdito... 查看详情

typecho支持上传本地图片的编辑器插件

...：http://msiyuetian.blog.51cto.com/8637744/1920161Typecho自带的文章编辑器太简洁了，很多功能都缺少，比如本地上传图片等功能。本文主要介绍一款插件：XhEditor1.0.2，支持本地上传图片，也可以直接拖放图片到编辑器中。1、下载插件，解... 查看详情

高分求thinkphp中设置xheditor图片上传详细步骤。。。

本人对JS一窍不通。。。希望能说简单一些。。。从图像中如何出现“上传”按钮，如何调用upImgUrl，如何配置upload.php开始说起，感谢万分。网上找了那些都是配置upload.php，并没有说如何调用“上传”按钮upImgUrl，我一点都不懂J... 查看详情

ckeditorubb编辑器的使用总结

xhEditor开源HTML编辑器xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE6.0+,Firefox3.0+,Opera9.6+,Chrome1.0+,Safari3.22+。http://xheditor.com/ CKEditor、UBB编辑器的使用总结https://www.cnblogs.com/cha 查看详情

将上传的图片插入summernote编辑器

】将上传的图片插入summernote编辑器【英文标题】：Insertuploadedimagetosummernoteeditor【发布时间】：2019-08-2501:00:14【问题描述】：我的目标是将上传的图片（本地文件）插入到summernote编辑器中。图片上传成功，只需插入编辑器即可。... 查看详情

kindeditor编辑器上传图片问题,总是选择上传东西（比如图片）的时候，不能上传，无限加载中的界面

用Kindeditor编辑器上传图片时出现“服务器故障”，小的从来没有用用过这个这就造成了文件上传不能超过200k，而事实上是提交数据不能超过200k,你可以参考技术A造成这个原因可能是你负责上传的upload_json.php文件有问题，请检查... 查看详情

图片上传完成后summernote编辑器不显示图片

】图片上传完成后summernote编辑器不显示图片【英文标题】：summernoteeditordoesnotshowupimageafterimageuploadcomplete【发布时间】：2015-12-0717:52:32【问题描述】：我的Html代码如下<scriptlanguage="JavaScript">functiongetCookie(name)varcookieValue=null;if(... 查看详情

图片未进入编辑器 [PHP 图片上传]

】图片未进入编辑器[PHP图片上传]【英文标题】：Imageisntgettingineditor[PHPimageupload]【发布时间】：2015-08-2607:39:11【问题描述】：您好，我尽我所能，并在网上搜索，但发现了。我的index.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""ht... 查看详情

在 Froala 编辑器中上传图片时如何替换图片 URL？

】在Froala编辑器中上传图片时如何替换图片URL？【英文标题】：HowtoreplaceimageURLwhenuploadimageinFroalaeditor?【发布时间】：2018-01-0118:42:18【问题描述】：我尝试将图像上传到我自己的服务器(Firebase)。我设法通过使用此事件上传到我的... 查看详情

如何在 Summernote 编辑器（AngularJs 版本）中上传图片？

】如何在Summernote编辑器（AngularJs版本）中上传图片？【英文标题】：HowtouploadimageinSummernoteEditor(AngularJsversion)?【发布时间】：2016-06-0704:54:05【问题描述】：谁能告诉我如何在summernote编辑器（angularJsv.）中上传图片？我的代码：$sc... 查看详情

百度编辑器ueditor上传图片时打开文件夹的延迟问题，点击上传图片弹窗打开慢问题

在使用ueditor开发时，作为一个web文本编辑器使用时。当点击上传图片时，文件夹要延迟好久才能打开。解决：针对多图片上传，将/ueditor/dialogs/image/image.js文件下的以下代码12345accept: { ... 查看详情

ueditor富文本编辑器跨域上传图片解决办法(代码片段)

在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的... 查看详情

百度编辑器拦截上传图片提交上传腾讯server并返回腾讯url

...上传到腾讯server的url，外连接所有屏蔽，则须要改动百度编辑器的源代码，源代码详细处理地方例如以下图。类为BinaryUploader.javaInputStreamis=fileStream.openStream();StatestorageState=StorageManager.saveFileByInputStream(is,physicalPath,maxS 查看详情

正文