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类
Oct 09 PHP
QQ登录 PHP OAuth示例代码
Jul 20 PHP
php随机输出名人名言的代码
Oct 07 PHP
一个简单的php加密解密函数(动态加密)
Jun 19 PHP
php在数组中查找指定值的方法
Mar 17 PHP
php通过exif_read_data函数获取图片的exif信息
May 21 PHP
php动态函数调用方法
May 21 PHP
yii2使用ajax返回json的实现方法
May 14 PHP
kindeditor 加入七牛云上传的实例讲解
Nov 12 PHP
php实现支付宝当面付(扫码支付)功能
May 30 PHP
PHP fclose函数用法总结
Feb 15 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
Mar 30 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
jQuery ui 1.7更新小结
2009/08/15 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python数组定义方法
2016/04/13 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python中的函数作用域
2018/05/07 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python面向对象实现方法总结
2020/08/12 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2014年医生工作总结
2014/11/21 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
跳高加油稿
2015/07/21 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers