需求：quill富文本+echarts图表
思路：echarts生成svg。然后转成img图片。添加到quill里
啥也不说，直接上代码。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="svg-wrap"> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="200" height="200" style="fill: #ddd"></rect> </svg> </div> <canvas id="canvas"></canvas> <script> window.onload = function () { //获取svg内容 var svg = document.getElementById('svg-wrap').innerHTML; console.log('svg', svg); var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); //新建Image对象 var img = new Image(); //svg内容 img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg)); //svg内容中可以有中文字符 img.src = 'data:image/svg+xml,' + svg; //svg内容中不能有中文字符 //svg编码成base64 img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg))); //svg内容中可以有中文字符 img.src = 'data:image/svg+xml;base64,' + window.btoa(svg); //svg内容中不能有中文字符 //图片初始化完成后调用 img.onload = function () { //将canvas的宽高设置为图像的宽高 canvas.width = img.width; canvas.height = img.height; //canvas画图片 c.drawImage(img, 0, 0); //将图片添加到body中 document.body.appendChild(img); }; }; </script> </body> </html>