使用WangEditor编辑器使用图片上传功能

使用WangEditor编辑器上传图片的一些注意事项

首先就是前端的HTML与JS
WangEditor的优点是不用引入CSS文件只需要引入一个js文件-wangEditor.js
HTML
只需要一个DIV块即可

<div class="Comm-User-Write" id="userwrite"></div>

 <script type="text/javascript">var E = window.wangEditorvar editor = new E('#userwrite')// 自定义菜单配置editor.config.menus = [//配置自己需要的菜单栏'emoticon',  // 表情'image',  // 插入图片'undo',  // 撤销'redo'  // 重复]editor.config.uploadImgServer = '../Backstage/Image/CommUploadimage.php'//配置图片上传后台处理路径editor.config.uploadImgTimeout = 5 * 10000editor.create()</script>

后台图像处理文件
参考隔壁好朋友
https://blog.csdn.net/qq_41614928/article/details/100541445

<?php
//empty()：检查一个变量是否为空  /  $_FILES数组：接收上传的文件
if(!empty($_FILES)){ //提交的文件是否为空//把文件上传到../../Image/Community/目录  注意最后Community后面的/必须加$up_root = '../../Image/Community/';//该目录是否存在  || 不存在创建该目录is_dir($up_root) || mkdir($up_root);//遍历上传的文件foreach($_FILES as $item){//error = 0 表示文件正常可以上传if($item['error'] === 0){//读取文件信息$content = file_get_contents($item['tmp_name'],'r');//获取当前时间戳来构成上传文件的新名称$fid =  time();//文件名和后缀以'.'分开 得到一个$suffix数组$suffix = explode('.',$item['name']);//删除数组最后一位并返回 获得后缀名$suffix = array_pop($suffix);$suffix && ($suffix = '.'.$suffix);//move_uploaded_file 将上传的文件移动到新位置move_uploaded_file($item['tmp_name'],$up_root.$fid.$suffix);$link = 'http://demo.com/Image/Community/'.$fid.$suffix;//这里是构成了图片的连接形式//接下来是构造WangEditor编辑器的返回值//数据结构要求比较严格 当我配置好之后 上传图片能正常上传但是无法回显到编辑器的输入框最后发现$data外面必须要有[]这个符号$data1 = array("url"=>$link,"alt"=>"","href"=>"");$data = array("errno"=> 0,"data"=>[$data1]);$json = json_encode($data);//序列化数组exit($json);}else{$data1 = array("url"=>"","alt"=>"","href"=>"");$data = array("errno"=> 1,"data"=>[$data1]);$json = json_encode($data);//序列化数组exit($json);};};
};

使用WangEditor编辑器使用图片上传功能相关推荐

vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
Quill编辑器实现图片上传功能
我们引入Quill时是可以直接插入图片了,但是是Quill将图片转化成了base64格式,我们如果存数据库的话,肯定不是长久之计,而真正符合我们要求的便是图片上传之后返回图片路径,再插入图片 1.点击 ...
ckeidtor编辑器添加图片上传功能
1.ckeditor默认没有上传图片功能,只能通过Url显示图片,图下图 2.首先说明,ckeditor是有上传功能的,只是隐藏了,需要通过配置让它显示找到ckeditor/plugins/imag ...
Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验兼容的主 ...
（转）淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
mavon-editor编辑器与图片上传
mavon-editor编辑器与图片上传图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器--mavon-editor的图片上传功能. 一.安装与引入 1. 首先在命令行安装 ...
ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
springboot 整合文本编辑器（图片上传）
Ueditor 文件上传配置: ueditor.config.js serverUrl:填写自己的路径 jsp->config.json: imageActionName:填写自己写的文件上传的 ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...

使用WangEditor编辑器使用图片上传功能

使用WangEditor编辑器上传图片的一些注意事项

使用WangEditor编辑器使用图片上传功能相关推荐

最新文章

热门文章