php 使用 wangeditor3 图片上传

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

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

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

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

定义一个富文本编辑器

然后富文本就出现了

然后就是图片上传代码 首先要在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的图片上传就完成了。

原文地址:https://www.cnblogs.com/wjm956/p/9449147.html

时间: 2024-10-10 17:15:37

php 使用 wangeditor3 图片上传的相关文章

django 发帖时碰到的图片上传

所用编辑器 [wangEditor.js] 图片上传接口 '/edit/image/' 返回内容  参照 https://www.kancloud.cn/wangfupeng/wangeditor3/335782 # 2018_12_29 日更新 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> &

jq upload图片上传代码

/* * 图片上传 * */ function postImgData() { $("#addFileInfo input[name='file']").change(function () { console.log($(this).val()) if (!$(this).val()) { return } var fileTyle = $(this).val().split("."); console.log(fileTyle); if (fileTyle[1]

[项目构建 五]babasport ajax图片上传及FastDFS入门案例.

今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jquery.form.js剩下的一个是FastDFS, 那么什么是FastDFS呢? FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存储问题,特别适合以中小文

ckeditor4.5.1配置图片上传的方法

本篇博文主要面向初学者,一步一步地实现ckeditor的图片上传,欢迎各位大神指正. ckeditor的图片上传默认是关闭的,网上也有很多相关的教程,可是不是讲的不完整,就是版本太旧已经不适用.我写这篇博文主要面向初学者,有错误的地方欢迎指正. 截止本文撰写,ckeditor最新版本是4.5.1,我下载的版本是4.5.1standard,如果本文的方法不管用,请下载同一版本尝试. 1.开启图片上传界面 文件地址:ckeditor/plugins/image/dialogs/image.js 搜索

数往知来 JQuery 图片上传_水印 &lt;二十二&gt;

一.图片上传  :enctype='multipart/form-date 首先在进行文件上传时,添加form表单中的enctype属性指定enctype='multipart/form-date', 文件数据发送给服务端,并不是把文件路径发送给服务端了,它会随机生成一个分割字符串, 把每一个表单元素分割开 <form method='post' action='' enctype='multipart/form-date'> //这里的enctype是提交请求报文的报文体的一种编码格式, 默

微信端调取相册和摄像头,实现图片上传,并上传到本地服务器

在微信公众号网页开发时,遇到了图片上传的问题,查看了微信的开发者文档,里面的资料比较全.接着我们看一下整个的流程 1.config权限配置 $.ajax({ url:'wx_getConfig', type:'get', dataType:'json', async:false, success:function(data){ var appId = data[0].appId; var timestamp = data[0].timestamp; var nonceStr = data[0].

java图片上传(mvc)

最近有开始学起了java,好久没写文章了,好久没来博客园了.最近看了看博客园上次写的图片上传有很多人看,今天在一些篇关于java图片上传的.后台接收用的是mvc.不墨迹了,直接上图. 先看目录结构.idea开发. 一.图片上传还是使用的这款jq插件.前端部署这款插件,不用说了吧.效果图       二.前台代码只需要盖一个位置.因为是比较好用的插件.插件样式自行修改. 三.后台代码. 后面看不见的. 这个图片上传主要是自己写了几个函数.让图片储存更加方便.分成了年月日储存.但是后期遍历比较困难,

.net core CKEditor 图片上传

最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="content" name="content"></text> <script> CKEDITOR.replace('content'); </script> CKeditor config.js 配置代码:需要配置图片上传路径 CKEDIT

微信JS-SDK接口 + FLASK实现图片上传

最近在做一个项目从全球各地采集图片,考虑采用微信JS-SDK来简化开发.图片会首先上传到微信的服务器,返回一个id,然后根据这个id去微信服务器获取图片.微信提供可选择的压缩图片功能.图片首先上传到微信的服务器,可以保障较好的上传稳定性. 详细内容请参考微信的官方文档:微信JS-SDK说明文档 运行页面如下 HTML 在微信demo的基础上修改,见微信JS-SDK DEMO页面 增加图片的多次选择,多次上传,删除等功能 uploadImage.html <!DOCTYPE html> <