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的范围解析操作符(::)的含义分析说明
Jul 03 PHP
PHP通过正则表达式下载图片到本地的实现代码
Sep 19 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
Jan 06 PHP
php添加文章时生成静态HTML文章的实现代码
Feb 17 PHP
PHP将session信息存储到数据库的类实例
Mar 04 PHP
CodeIgniter配置之routes.php用法实例分析
Jan 19 PHP
PHP操作mysql数据库分表的方法
Jun 09 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
Feb 04 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
Nov 22 PHP
PHP面向对象程序设计之构造方法和析构方法详解
Jun 13 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
Jun 02 PHP
Laravel中GraphQL接口请求频率实战记录
Sep 01 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
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
Javascript函数的参数
2015/07/16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
node.js的事件机制
2017/02/08 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
转党组织关系介绍信
2014/01/08 职场文书
交通事故协议书范本
2014/11/18 职场文书
贷款收入证明范本
2015/06/12 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
使用CSS实现音波加载效果
2023/05/07 HTML / CSS