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将数据库中的电话号码读取出来并生成图片
Aug 31 PHP
php代码运行时间查看类代码分享
Aug 06 PHP
PHP 自定义错误处理函数trigger_error()
Mar 26 PHP
PHP四大安全策略
Mar 12 PHP
PHP中模拟处理HTTP PUT请求的例子
Jul 22 PHP
laravel安装zend opcache加速器教程
Mar 02 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
Oct 23 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
Jun 11 PHP
让Laravel API永远返回JSON格式响应的方法示例
Sep 05 PHP
Laravel框架实现的rbac权限管理操作示例
Jan 16 PHP
详解Laravel设置多态关系模型别名的方式
Oct 17 PHP
PHP 构造函数和析构函数原理与用法分析
Apr 21 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
Python 查看文件的编码格式方法
2017/12/21 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
单位消防安全制度
2014/01/12 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
房地产项目建议书
2014/03/12 职场文书
学习之星事迹材料
2014/05/17 职场文书
奖学金个人总结
2015/03/04 职场文书
办公室岗位职责范本
2015/04/11 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
晚会开幕词范文
2016/03/04 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang