博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Quill.js 富文本编辑器插件使用
阅读量:6260 次
发布时间:2019-06-22

本文共 1455 字,大约阅读时间需要 4 分钟。

hot3.png

官网 API 查看:

图片上传及路径设置

对于在该编辑器中生成的图片为 base64 编码,所生成的字符占据太大空间,可考虑将其上传至服务器中,在该图片设置保存好的文件路径即可,以 php 为例。

js 代码

// 圖片上傳quill.on('text-change', function(delta, oldDelta, source) {	var $img = $("#editor .ql-editor img[src^='data:image']");	var img = $img.length;	if(img > 0){	    $img.each(function(idx, dom){	        var src = $(dom).attr('src');                var url = ""; // php 后台文件上传方法	        $.post(url, {img: src}, function(res){		    var href = res.src; // 返回图片路径		    $(dom).attr('src', href);	        }, "json");	    });	}});

php 代码

// base64 圖片上傳function base64_upload() {	$base64 = $_POST['img'];        $base64_image = str_replace(' ', '+', $base64);        //post的数据里面,加号会被替换为空格,需要重新替换回来,如果不是post的数据,则注释掉这一行        if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){            //匹配成功            if($result[2] == 'jpeg'){                $image_name = uniqid().'.jpg';            }else{                $image_name = uniqid().'.'.$result[2];            }            $image_file = "path"; // 储存文件的路径            //服务器文件存储路径            if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))){                $res = array('src' => $image_name, 'code' => 1);				echo json_encode($res);            }else{                return false;            }        }else{            return false;        }}

对表格的支持

该插件暂不支持表格的编辑,可自行进行拓展,详情查看 API 文档,或者访问

转载于:https://my.oschina.net/u/3460260/blog/1592721

你可能感兴趣的文章
memcache与Redis
查看>>
Python27中Json对中文的处理
查看>>
结构,是指事物自身各种要素之间的相互关联和相互作用的方式
查看>>
andoid电阻触摸移植
查看>>
备忘录模式
查看>>
U盘安装CentOS 7卡住在 mounting configuration file system
查看>>
《Java设计模式》之装饰模式
查看>>
android开发使用SQLite之写日记
查看>>
[生活] 日常英语学习笔记-NEVER HAVE I EVER游戏
查看>>
uva103 - Stacking Boxes(DAG)
查看>>
ACdream 1127(Base Station-树状数组-2个约束条件)
查看>>
【LFM】隐语义模型
查看>>
普通SQL语句可以用Exec执行
查看>>
Python提取MD5
查看>>
開始EEPlat之旅
查看>>
BootStrap 专题
查看>>
linux 下同步异步,堵塞非堵塞的一些想法
查看>>
原子变量的性能问题
查看>>
HDU4638:Group(线段树离线处理)
查看>>
Jenkins构建触发器
查看>>