简介
Quill SVG 是一个 SVG 导出扩展，它可以将用户在 quill 编辑器中编辑的画布转换成 SVG 。rollup-plugin-quillsvg 是一个 rollup 插件，它可以将 Quill SVG 中导出的 SVG 转换成字符串，以便在项目中使用。
安装
在使用 rollup-plugin-quillsvg 之前，需要先安装 quill-svg。
npm install quill-svg
然后安装 rollup-plugin-quillsvg：
npm install rollup-plugin-quillsvg
使用方法
使用 rollup-plugin-quillsvg 的方法很简单，只需要在 rollup 配置文件中添加一个插件即可。
-- -------------------- ---- -------
------ -------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
----------
-
--这样配置之后，会将 SVG 转化为字符串导出，可以在项目中直接使用。
示例代码
假设我们在 quill 编辑器中编辑了如下的内容：
<div id="editor">
<h1>Hello world!</h1>
<p>This is a paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>我们想要将这个编辑器中的内容导出为 SVG，然后在项目中使用。首先需要在 quill 中注册 quill-svg 插件：
import Quill from 'quill';
import QuillSvg from 'quill-svg';
Quill.register('modules/quillSvg', QuillSvg);然后在编辑器中使用 quillSvg 模块：
const editor = new Quill('#editor', {
modules: {
quillSvg: true
},
theme: 'snow'
});
const svgString = editor.modules.quillSvg.getSerializedSVG();现在我们需要将 SVG 字符串导入到项目中，可以在 rollup 配置文件中这样做：
-- -------------------- ---- -------
------ -------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
----------
-
--然后在项目中写一个简单的 HTML 文件来展示 SVG：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------ ----- --- ------------
-------
------
---- -------------------------
------- --------------------------------
--------
----- --------- - ------ -- --------- --- ---
----- ------------ - -----------------------------------------
---------------------- - ----------
---------
-------
-------指导意义
在前端开发中，有时候我们需要将用户的操作导出为 SVG，以便将其用于其他用途，如印刷或平面设计。rollup-plugin-quillsvg 为我们提供了一个简单的解决方案，可以快速并且高质量地将 quill 编辑器中所编辑的画布导出为 SVG。这个插件让我们的工作变得更加简单，同时也使我们的代码更加优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f7881e8991b448dce2e