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

2019独角兽企业重金招聘Python工程师标准>>>

官网 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

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