xheditor编辑器上传图片
之前在用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编辑器上传图片的更多相关文章
- xhEditor编辑器上传图片到 OSS
前段时间,公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思,想想 基本的用户图片上传到自己服务器,还有点小占地方: 后来....然后直接上传到阿里云 .接下 ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- xheditor编辑器的使用
xheditor编辑器的使用 一个博客.cms网站都一定会用到一个html编辑器,刚好xmfdsh在做网站时候需要用到这类编辑器,在对比了之后,发现其实差不了多少,刚好一个不错的friend在用xhe ...
- 使用Ueditor编辑器上传图片总结;
今天使用Ueditor编辑器上传图片一直出问题,在网上找了多种方法,最后总结如下: Ueditor编辑器是百度开发的编辑器,要在jsp页面添加Ueditor编辑器,需要以下几步: (1)到 http: ...
- 富文本编辑器上传图片需要配置js,后台代码
富文本编辑器上传图片需要配置js,后台代码
- vue问题四:富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
- DWZ集成的xhEditor编辑器浏览本地图片上传的设置
有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...
- tinymce 编辑器 上传图片
tinymce编辑器进行本地图片上传 首先下载tinymce.js之后 在form中添加一个<textarea>元素 给其一个id和name 然后就可以初始化编辑器了 tinymce.in ...
- eWebeditor编辑器上传图片路径错误解决方法[疑难杂症]【转,作者:unvs】
做了一个多版本的网站,后台用的编辑器是eWebeditor,NET版,后面发现上传图片或者文件之后,路径错误无法显示,必须手工修改才行.. 为了更清楚的说明问题,我下面会说的比较详细,首先是网站文件框 ...
随机推荐
- Linux内存管理 (15)页面迁移
专题:Linux内存管理专题 关键词:RMAP.页面迁移. 相关章节:反向映射RMAP.内存规整. 页面迁移的初衷是为NUMA系统提供一种将进程迁移到任意内存节点的能力,后来内存规整和内存热插拔场景都 ...
- 三:OVS+GRE之完整网络流程
知识点一:linux网桥提供安全组 知识点二:每新建一个网络,在网络节点都会新建一个namespace,只要为该网络建立子网,那么该namespace里就新增dhcp来为该子网分配ip,也可以为该网络 ...
- Dubbo-Zookeeper安装
安装zookeeper: 1.拖入tar.gz包,解压 2.建立/usr/zookeeper路径,该路径创建logs文件夹和data文件夹 3.进入conf目录,复制一份zoo_sample.cfg为 ...
- 【原创】微服务为什么一定要用docker
引言 早在2013年的时候,docker就已经发行,然而那会还是很少人了解docker.一直到2014年,Martin Fowler提出了微服务的概念,两个不相干的技术终于走在了一起,创造了今天的辉煌 ...
- Scrapy框架基本用法讲解
目标站点:http://quotes.toscrape.com/ (scrape官方练习站点) 这边为了区别Python3.5 和 Python3.7 我修改了scrapy的可执行文件 创建项目文件: ...
- Mybatis逆向工程 —— ResultMaps collection already contains value for ***
报错提示: Result Maps collection already contains value for ***. 遭遇场景: maven+ssm 项目中,采用了mybatis的逆向工程生成 p ...
- windows平台上用python 远程线程注入,执行shellcode
// 转自: https://blog.csdn.net/Jailman/article/details/77573990import sys import psutil import ctypes ...
- 使用按钮触发element 时间事件 --时间戳
本日 本周 本月 本年 时间按钮 date 组件内添加 pickerOptions2: { shortcuts: [ { text: '今日', onClick(picker) { picker ...
- js 实现数据结构 -- 栈
原文: 在 Javascript 中学习数据结构与算法. 概念: 栈是一种遵从先进后出 (LIFO) 原则的有序集合:新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端为栈底.在栈里,新元素都靠 ...
- 前端js区域上下拖拽
先说说需求吧,网页内又上下两个区域,需要做到的功能是,第一个区域A底部的边可以进行拖拽使得区域变大或变小,同时第二个区域B跟着拖动的变化进行自适应. 思路: 1.使用一个假的div定义为那条可进行拖拽 ...