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 富文本编辑器相关推荐

  1. Ueditor富文本编辑器

    Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签 设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...

  2. ueditor富文本编辑器过滤了代码,如何取消?

    后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...

  3. java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  4. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  5. java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器

    spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片 依赖库版本: spring boot ...

  6. php引入百度Ueditor富文本编辑器

    php引入百度Ueditor富文本编辑器 文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...

  7. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

  8. UEditor富文本编辑器不显示问题

    项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...

  9. QT QWebEngineView+UEditor富文本编辑器

    QT QWebEngineView+UEditor富文本编辑器 一.简述 记--简单使用QWebEngineView+UEditor富文本编辑器实现一个简单的编辑器,支持图片(支持右键粘贴,支持直接拖 ...

  10. UEditor 富文本编辑器-后端实现文件上传功能

    一.背景 前端使用 UEditor 富文本编辑器,前后端分离情况下,需要后端提供一个接口实现文件上传功能 本文根据文章:vue+Ueditor集成 [前后端分离项目][图片.文件上传][富文本编辑] ...

最新文章

  1. 《OpenCV3编程入门》学习笔记6 图像处理(七)阈值化
  2. Configure,Makefile.am, Makefile.in, Makefile文件之间关系
  3. 谈谈程序链接及分段那些事
  4. POJ 2653 Pick-up sticks 判断线段相交
  5. java string逆序_java经典入门算法题,java初学者必备
  6. young people can also be a leader
  7. 多多进宝推广团队_多多进宝推广形式及推手寻找、佣金结算方式是怎样的?
  8. python numpy数组中冒号 : 的使用--全局选择、表示区间
  9. React Router入门指南
  10. pymongo操作方法
  11. Opencv4.5.5 + Opencv4.5.5_contrib 图像拼接
  12. 深度学习图像分割:U-Net 体系结构
  13. 推推:产品的规划和商业化分析
  14. 数据结构与算法面试题
  15. js截取指定字符串后面的所有字符
  16. Ultra Fast Structure-aware Deep Lane Detection论文解读
  17. 2范数和F范数的区别
  18. JAVA并发类包介绍
  19. SaaS爆发前夜,e签宝的选择与命运
  20. dw连接mysql数据库原理_Dreamweaver中连接SQL Server数据库代码

热门文章

  1. 十二. 一步步破解JEB 2.0demo版二
  2. aspnetpager分页,不使用存储过程
  3. Java项目中读取properties文件,以及六种获取路径的方法
  4. oracle protocol=beq 不可用,Oracle BEQ方式连接配置
  5. lscpu命令查看CPU统计信息
  6. makefile使用--命令(三)
  7. jdbc动态查询语句_Java修行第037天--JDBC技术
  8. python使用xlrd读取xlsx文件_005:【Python读取本地Excel文件】使用xlrd模块来读取本地Excel文件...
  9. 新手理解的JS原型链
  10. 剖析nodejs的事件循环