文档章节

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

林梓阳
 林梓阳
发布于 2017/12/20 16:59
字数 324
阅读 146
收藏 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
博文 52
码字总数 24831
作品 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
修改uedit,使其支持上传和使用七牛的图片

Ueditor (http://ueditor.baidu.com/website/) 是一个网页内的富文本编辑器组件。其中有一个功能是插入图片。当用户使用插入图片功能时,要从本机上传图片,然后再把图片url插入到富文本中。...

bitbone
2016/03/02
49
24

没有更多内容

加载失败,请刷新页面

加载更多

传播正能量——《海南英才》阅读的读后感2200字

传播正能量——《海南英才》阅读的读后感2200字: 新华社记者12月8日从公安部获悉,针对自媒体“网络水军”敲诈勒索等违法犯罪活动突出问题,今年以来,公安部组织各地公安机关依法深入开展侦...

原创小博客
16分钟前
1
0
Confluence 6 对一个空间进行归档后产生的影响

空间 如果一个空间被归档: 将不会在查找结果中显示,除非你选择 在归档空间中查找(Search archived spaces)。如果没有归档空间的话,这个功能是隐藏的。 页面和内容将不会在 Confluence 的...

honeymose
18分钟前
2
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
4
0
Integer使用双等号比较会发生什么

话不多说,根据以下程序运行,打印的结果为什么不同? Integer a = 100;Integer b = 100;System.out.println(a == b);//print : trueInteger a = 200;Integer b = 200;System.out.pr...

兜兜毛毛
昨天
10
0
CockroachDB

百度云上的CockroachDB 云数据库 帮助文档 > 产品文档 > CockroachDB 云数据库 > 产品描述 开源NewSQL – CockroachDB在百度内部的应用与实践 嘉宾演讲视频及PPT回顾:http://suo.im/5bnORh ...

miaojiangmin
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部