文档章节

Quill.js 富文本编辑器插件使用

林梓阳
 林梓阳
发布于 2017/12/20 16:59
字数 324
阅读 93
收藏 1

官网 API 查看:https://quilljs.com/docs/quickstart/

图片上传及路径设置

对于在该编辑器中生成的图片为 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://github.com/quilljs/quill/issues/117

© 著作权归作者所有

共有 人打赏支持
林梓阳
粉丝 5
博文 50
码字总数 24369
作品 0
厦门
程序员
10个免费的javascript富文本编辑器(jQuery and non-jQuery)

祝愿园子里的朋友圣诞节快乐。 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascript富文本编辑器使我们添...

老鸟的空间
2014/07/05
0
1
ExtJS富文本编辑器插件--ExtEditor

ExtJS富文本编辑器插件,基于KindEditor。 ExtJS自带的富文本编辑器功能有限,局限性很大。本插件整合当前流行的KindEditor框架,使用简便,功能强大。

crazymus
2015/09/05
2.5K
0
crazymus/ExtEditor

####ExtEditor ExtJS富文本编辑器插件,基于KindEditor。 ExtJS自带的富文本编辑器功能有限,局限性很大。本插件整合当前流行的KindEditor框架,使用简便,功能强大。 ####快速上手 引入Kin...

crazymus
2015/09/05
0
0
Thinkphp整合最新Ueditor编辑器

说到最新的富文本编辑器的确不少(ckeditor、fkeditor、ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 插件中提...

nsns
08/24
0
0
我的网站搭建 (第六天) Ckeditor编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,...

代码打碟手
08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
1
0
kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
10
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
3
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
20
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部