PHP Ueditor 富文本编辑器
2016年12月11日 08:46:59 星期日
百度的简版富文本编辑器umeditor很久没更新了
全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主要说明图片上传怎么使用
HTML:
1 //承载编辑器 2 <script id="container" name="content" type="text/plain"></script> 3 4 5 //加载js 6 <script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.config.js"></script> 7 <script type="text/javascript" charset="utf-8" src="<?= STATICURL ?>web/ueditor/ueditor.all.min.js"></script> 8 9 <script type="text/javascript"> 10 //实例化编辑器 11 var ue = UE.getEditor('container', 12 { 13 initialContent:'', 14 initialFrameWidth:1000, 15 initialFrameHeight:240, 16 serverUrl:"<?= BASEURL ?>Home/Upload/ueUpload", 17 imagePath:"", //路径前缀 imageUrlPrefix:'' //image前缀, 如果服务端返回的图片地址中有http://...那这里就留空, 此项必须有 18 }); 19 </script>
注意: 第16行, 要写你的PHP代码可访问链接, ueditor会自动拼接相关的参数去指明要什么东西:
第一步: ueditor会先拼接上 ?action=config 告诉PHP返回一些配置信息,
第二步: ueditor获取上一步返回的json配置信息后拼接上 ?action=xxx 再次请求进行图片上传
PHP代码(上传到了阿里云)
1 /** 2 * 百度ueditor编辑器调用, 3 * 对应js配置项为serverUrl 4 */ 5 public function ueUpload() 6 { 7 $arg = I('get.action'); 8 switch ($arg) { 9 case 'config': 10 exit('{ 11 /* 上传图片配置项 */ 12 "imageActionName": "ueUploadImage", /* 执行上传图片的action名称 */ 13 "imageFieldName": "ueUpfile", /* 提交的图片表单名称 */ 14 "imageMaxSize": 2048000, /* 上传大小限制,单位B */ 15 "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ 16 "imageCompressEnable": true, /* 是否压缩图片,默认是true */ 17 /* 截图工具上传 */ 18 "snapscreenActionName": "ueUploadImage", /* 执行上传截图的action名称 */ 19 }'); 20 break; 21 case 'ueUploadImage': //这个值对应上个case中的ueUploadImage 22 $oss = new Upload(); 23 $url = $oss->up('ueUpfile', 'ueditor'); //ueUpfile 对应上个case中的ueUpfild 24 if ($oss->isOk()) { //上传成功 25 $rs = [ 26 'state' => 'SUCCESS', 27 'url' => $url, 28 'title' => '', 29 'original' => '' 30 ]; 31 $this->ajaxReturn($rs); 32 } else { //上传失败 33 $rs = [ 34 'state' => '上传图片失败', 35 ]; 36 $this->ajaxReturn($rs); 37 } 38 break; 39 default: 40 exit(); 41 } 42 }
注意:
1. 第12行和第21行的配置是对应的, 第13行的值就是上传的$_FILES中的表单名字
2. 注意25~30行, 是上传成功后的返回结构(转为json返回)
3. 注意33~35行, 是上传失败后的返回结构(转为json返回)
转载于:https://www.cnblogs.com/iLoveMyD/p/6159031.html
PHP Ueditor 富文本编辑器相关推荐
- Ueditor富文本编辑器
Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签 设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...
- ueditor富文本编辑器过滤了代码,如何取消?
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...
- java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片 依赖库版本: spring boot ...
- php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器 文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
- UEditor富文本编辑器不显示问题
项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...
- QT QWebEngineView+UEditor富文本编辑器
QT QWebEngineView+UEditor富文本编辑器 一.简述 记--简单使用QWebEngineView+UEditor富文本编辑器实现一个简单的编辑器,支持图片(支持右键粘贴,支持直接拖 ...
- UEditor 富文本编辑器-后端实现文件上传功能
一.背景 前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能 本文根据文章:vue+Ueditor集成 [前后端分离项目][图片.文件上传][富文本编辑] ...
最新文章
- 《OpenCV3编程入门》学习笔记6 图像处理(七)阈值化
- Configure,Makefile.am, Makefile.in, Makefile文件之间关系
- 谈谈程序链接及分段那些事
- POJ 2653 Pick-up sticks 判断线段相交
- java string逆序_java经典入门算法题,java初学者必备
- young people can also be a leader
- 多多进宝推广团队_多多进宝推广形式及推手寻找、佣金结算方式是怎样的?
- python numpy数组中冒号 : 的使用--全局选择、表示区间
- React Router入门指南
- pymongo操作方法
- Opencv4.5.5 + Opencv4.5.5_contrib 图像拼接
- 深度学习图像分割:U-Net 体系结构
- 推推:产品的规划和商业化分析
- 数据结构与算法面试题
- js截取指定字符串后面的所有字符
- Ultra Fast Structure-aware Deep Lane Detection论文解读
- 2范数和F范数的区别
- JAVA并发类包介绍
- SaaS爆发前夜,e签宝的选择与命运
- dw连接mysql数据库原理_Dreamweaver中连接SQL Server数据库代码
热门文章
- 十二. 一步步破解JEB 2.0demo版二
- aspnetpager分页,不使用存储过程
- Java项目中读取properties文件,以及六种获取路径的方法
- oracle protocol=beq 不可用,Oracle BEQ方式连接配置
- lscpu命令查看CPU统计信息
- makefile使用--命令(三)
- jdbc动态查询语句_Java修行第037天--JDBC技术
- python使用xlrd读取xlsx文件_005:【Python读取本地Excel文件】使用xlrd模块来读取本地Excel文件...
- 新手理解的JS原型链
- 剖析nodejs的事件循环