Quill.js 富文本編輯器插件使用

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