php用wangeditor3实现图片上传功能


Posted in PHP onAugust 22, 2019

就在最近,公司让我写一个后台,其中用到了富文本编辑器。自从这个富文本的出现 我就慢慢的进入了一个坑,起初不知道用什么编辑器好,看了好多好多,最后选择了。这个 wangeditor3。个人认为这个富文本很干净,还很多功能。

选择了编辑器 我就慢慢的走进了坑的道理,一步一个坎。接下来就是看代码了。

这个是wangeditor,选择一个自己喜欢的版本。我用的是3的

https://github.com/wangfupeng1988/wangEditor/releases

php用wangeditor3实现图片上传功能

定义一个富文本编辑器

php用wangeditor3实现图片上传功能

然后富文本就出现了

php用wangeditor3实现图片上传功能

然后就是图片上传代码 首先要在js中配置点东西。

<script>
    var E = window.wangEditor;
    var editor = new E(‘#elm1‘);
    editor.customConfig.uploadImgServer = "uploads.php"; // 上传图片到服务器
    editor.customConfig.uploadFileName = "file";   //文件名称 也就是你在后台接受的 参数值
    editor.customConfig.uploadImgHeaders = {  //header头信息 
      ‘Accept‘: ‘text/x-json‘
    }
    // 将图片大小限制为 3M
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024  //默认为5M
    editor.customConfig.uploadImgShowBase64 = false;  // 使用 base64 保存图片
    // editor.customConfig.customAlert = function (info) { //自己设置alert错误信息
    //   // info 是需要提示的内容
    //   alert(‘自定义提示:‘ + ‘图片上传失败,请重新上传‘)
    // };
    editor.customConfig.debug = true; //是否开启Debug 默认为false 建议开启 可以看到错误
    // editor.customConfig.debug = location.href.indexOf(‘wangeditor_debug_mode=1‘) > 0; // 同上 二选一
    //图片在编辑器中回显
    editor.customConfig.uploadImgHooks = { 
      error: function (xhr, editor) {
        alert("2:" + xhr + "请查看你的json格式是否正确,图片并没有上传");
        // 图片上传出错时触发 如果是这块报错 就说明文件没有上传上去,直接看自己的json信息。是否正确
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
      },
      fail: function (xhr, editor, result) {
        // 如果在这出现的错误 就说明图片上传成功了 但是没有回显在编辑器中,我在这做的是在原有的json 中添加了
        // 一个url的key(参数)这个参数在 customInsert也用到
        // 
        alert("1:" + xhr + "请查看你的json格式是否正确,图片上传了,但是并没有回显");
      },
      success:function(xhr, editor, result){
        //成功 不需要alert 当然你可以使用console.log 查看自己的成功json情况 
        //console.log(result)
        // insertImg(‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘)
      },
      customInsert: function (insertImg, result, editor) {
        //console.log(result);
        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
        // 举例:假如上传图片成功后,服务器端返回的是 {url:‘....‘} 这种格式,即可这样插入图片:
        insertImg(result.url);
      }
    };
    editor.customConfig.showLinkImg = true; //是否开启网络图片,默认开启的。
    editor.create()
  </script>

这些是javascript的配置代码。

详细的php代码在我的git里面 有兴趣的可以下载一下~

https://github.com/wjmGG/wangeditor3UploadForPHP.git

这样wangeditor3的图片上传就完成了。

以上就是本次介绍的全部知识点内容,感谢大家对三水点靠木的支持。

PHP 相关文章推荐
PHP定时自动生成静态HTML的实现代码
Jun 20 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
Nov 02 PHP
Zend Studio 实用快捷键一览表(精心整理)
Aug 10 PHP
php数组操作之键名比较与差集、交集赋值的方法
Nov 10 PHP
一个简单至极的PHP缓存类代码
Oct 23 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
Apr 26 PHP
php实现数组中出现次数超过一半的数字的统计方法
Oct 14 PHP
关于Curl在Swoole协程中的解决方案详析
Sep 12 PHP
laravel请求参数校验方法
Oct 10 PHP
如何在centos8自定义目录安装php7.3
Nov 28 PHP
Thinkphp极验滑动验证码实现步骤解析
Nov 24 PHP
PHP数组实际占用内存大小原理解析
Dec 11 PHP
PHP生成zip压缩包的常用方法示例
Aug 22 #PHP
Laravel 实现数据软删除功能
Aug 21 #PHP
PHP针对redis常用操作实例详解
Aug 17 #PHP
php5.6.x到php7.0.x特性小结
Aug 17 #PHP
PHP中非常有用却鲜有人知的函数集锦
Aug 17 #PHP
PHP中Session ID的实现原理实例分析
Aug 17 #PHP
解决php extension 加载顺序问题
Aug 16 #PHP
You might like
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
javascript 节点排序 2
2011/01/31 Javascript
JS重要知识点小结
2011/11/06 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python断言assert的用法代码解析
2018/02/03 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python sorted方法和列表使用解析
2019/11/18 Python
关于Python解包知识点总结
2020/05/05 Python
如何用python批量调整视频声音
2020/12/22 Python
服装电子商务创业计划书
2014/01/30 职场文书
团购业务员岗位职责
2014/03/15 职场文书
心理健康活动总结
2014/04/30 职场文书
分公司任命书
2014/06/06 职场文书
岳麓书院导游词
2015/02/03 职场文书
英语教师求职信范文
2015/03/20 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技