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

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

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

主要有两种方案:

  1. 把图片上传到服务器中,然后把图片的路径保存到数据库
  2. 用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编辑器上传图片的更多相关文章

  1. xhEditor编辑器上传图片到 OSS

    前段时间,公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思,想想 基本的用户图片上传到自己服务器,还有点小占地方: 后来....然后直接上传到阿里云 .接下 ...

  2. ASP利用xhEditor编辑器实现图片上传的功能。

    本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...

  3. xheditor编辑器的使用

    xheditor编辑器的使用 一个博客.cms网站都一定会用到一个html编辑器,刚好xmfdsh在做网站时候需要用到这类编辑器,在对比了之后,发现其实差不了多少,刚好一个不错的friend在用xhe ...

  4. 使用Ueditor编辑器上传图片总结;

    今天使用Ueditor编辑器上传图片一直出问题,在网上找了多种方法,最后总结如下: Ueditor编辑器是百度开发的编辑器,要在jsp页面添加Ueditor编辑器,需要以下几步: (1)到 http: ...

  5. 富文本编辑器上传图片需要配置js,后台代码

    富文本编辑器上传图片需要配置js,后台代码

  6. vue问题四:富文本编辑器上传图片

    vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

  7. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  8. tinymce 编辑器 上传图片

    tinymce编辑器进行本地图片上传 首先下载tinymce.js之后 在form中添加一个<textarea>元素 给其一个id和name 然后就可以初始化编辑器了 tinymce.in ...

  9. eWebeditor编辑器上传图片路径错误解决方法[疑难杂症]【转,作者:unvs】

    做了一个多版本的网站,后台用的编辑器是eWebeditor,NET版,后面发现上传图片或者文件之后,路径错误无法显示,必须手工修改才行.. 为了更清楚的说明问题,我下面会说的比较详细,首先是网站文件框 ...

随机推荐

  1. Linux+Shell常用命令总结

    因为自己不经常使用linux的命令行工具,但是mac的终端还是经常使用的,有些命令总是要想一会或者百度一下才知道怎么用,抽时间整理了一下常用的命令,作为笔记. 常用命令 查看文件操作: ls :列出当 ...

  2. 机智的造假->sql给Echart提供数据

    数据要求:要求数据随着上班时间的延长要递增,要看起来像真数据 declare @key int; declare cur_rate cursor for select keyID from #t1; ...

  3. Asible第三章:roles--小白博客

    本节内容: 什么场景下会用roles? roles示例 一.什么场景下会用roles? 假如我们现在有3个被管理主机,第一个要配置成httpd,第二个要配置成php服务器,第三个要配置成MySQL服务 ...

  4. Vuex、axios、跨域请求处理和import/export的注意问题

    一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...

  5. 关于【Webpack】的入门使用

    注:节选自http://www.jianshu.com/p/42e11515c10f 1.安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample pro ...

  6. redis - Sentinel 和 cluster

    redis哨兵集群 引入 上回说到redis主从同步时,master(主库)如果宕机了怎么解决... 我给出了一个手动解决的办法! 但实际上,如果你配置了Sentinel,它能自动发现master宕机 ...

  7. mongoDB 数据库操作

    mongoDB 数据库操作 数据库命名规则 . 使用 utf8 字符,默认所有字符为 utf8 . 不能含有空格 . / \ "\0" 字符 (c++ 中会将 "\0&q ...

  8. vue实战记录(一)- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

  9. 删除链表倒数第n个节点

    题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链 ...

  10. python6-深浅拷贝 元组类型 字典类型 集合类型

    一,深浅拷贝 (一) 值拷贝:应用场景最多 案例:1.ls = [1, 'abc', [10]]    ls1 = ls     # :ls1直接将ls中存放的地址拿过来#  :    ls内部的值发 ...