简介
vega-ckeditor 是一个将 Vega 可视化图表嵌入到 CKEditor 中的 npm 包。它使得在 CKEditor 中插入可视化图表变得更加方便易用，通过使用 vega-ckeditor，用户可以更快捷、高效的完成对文本内容的编辑，并将其转换为丰富多彩的图像。
安装
在使用 vega-ckeditor 之前，需要先安装 CKEditor。安装命令如下：
npm install ckeditor
安装完毕后，再通过 npm 包管理器安装 vega-ckeditor：
npm install vega-ckeditor
使用方法
添加 Vega-CKEditor 插件
要使用 Vega-CKEditor 插件，需要将其添加到 CKEditor 框架中。在 HTML 中的 <head> 标签中添加以下链接：
<link href="node_modules/vega-ckeditor/dist/ckeditor.js" rel="stylesheet" />
添加 editorConfig 配置项
在编辑器初始化时，需要将 Vega-CKEditor 的配置项添加到 CKEditor 的 config 中。通过以下方式来添加：
-- -------------------- ---- -------
----- ------ - -------------------------- -
------------- ----------------
-------- -
- ----- -------------- ------ -------- --------- --
- ----- --------------- ------ - ------------ - -
--
----- -
----- ---------------------
------ ------------------
--------- --------
-
---添加 Vega-Chart Button
添加一个名为 vega-toolbar 的新工具栏，然后在该工具栏中添加 Vega-Chart 按钮，以访问 Vega-Chart 编辑器。
toolbar: [
{ name: 'basicstyles', items: ['Bold', 'Italic'] },
{ name: 'vega-toolbar', items: [ 'Vega-Chart' ] }
],在 Vega-Chart 编辑器中插入图表
点击 Vega-Chart 图标将打开 Vega-Chart 编辑窗口。在此窗口中，您可以根据需要添加数据源和设置数据映射。
-- -------------------- ---- -------
----- -----------------
---------------------------------- -
----- -----------------
--- ------ - --------------------------------
--------------- -----------
----------------------- - ----------------------------------------------------------
---
-
---
--------------------------------- -
------ ------- -------
-------- ----------------
---
-在网页中展示图表
在编辑器打开 Vega-Chart 编辑器窗口并保存图表之后，请确保在您的网页中包含 vega 和 vega-lite 库的引用，以便正确显示图表。
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.18.2"></script>
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ------------
------- -------------------------------------------------
----- -------------------------------------------------- ---------------- --
------- --------------------------------------------------------
------- -------------------------------------------------------------
-------
------
------
------ ----------------------------------
--------- ----------- ------------- --------- ---------------------
-------
--------
----- ------ - -------------------------- -
------------- ----------------
-------- -
- ----- -------------- ------ -------- --------- --
- ----- --------------- ------ - ------------ - -
--
----- -
----- ---------------------
------ ------------------
--------- --------
-
---
---------------------------------- -
----- -----------------
--- ------ - --------------------------------
--------------- -----------
----------------------- - ----------------------------------------------------------
---
-
---
--------------------------------- -
------ ------- -------
-------- ---------------
---
---------
-------
-------结论
vega-ckeditor 是一个非常方便的工具，可以大大简化嵌入到 CKEditor 编辑器中的 Vega 图表的操作步骤，从而让您更快捷，轻松的完成文本编辑和图表展示的工作。使用文档中提到的技术和代码，在您的项目中轻松的集成 vega-ckeditor，从而提高您的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734e890c4f72775837c8