介绍
Graph-tinymce-plugin 是一个可以帮助你轻松在 TinyMCE 编辑器插入并编辑图表的插件。这个插件功能丰富，支持多种图表类型，包括线图、条形图、折线图、饼图，以及散点图等。可以用来帮助你在编写报告或是文档的时候，方便地插入并编辑图表，使得你的文档更加清晰易懂。
安装
要使用 graph-tinymce-plugin，需要先将其安装。使用 npm 进行安装非常简单，只需要在命令行中输入以下命令：
npm install graph-tinymce-plugin
使用
在安装完毕之后，就可以在你的项目中使用 graph-tinymce-plugin 了。下面是一些使用示例：
初始化编辑器
首先，你需要初始化一个 TinyMCE 编辑器。在这个编辑器中可以使用 graph-tinymce-plugin 来插入图表。
tinymce.init({
selector: '#editor',
plugins: 'graph',
toolbar: 'graph',
resize: false
});添加一个图表
要在 TinyMCE 编辑器中添加一个图表，请单击工具栏中的“图表”按钮。这将会弹出一个对话框，通过这个对话框可以选择图表类型，输入数据等信息。
-- -------------------- ---- -------
-- ----
-------- --------
-- ----
-------- --------
-- -----
----------------------- ---------------- -
-- ----------------------
------------------------------------- -
----- -------
--------- ---------- -
------------------------------
------ -------
---- ---------------------
------ ----
------- ---
---
-
---
-配置一个图表
要配置图表，请单击插入图表按钮，在弹出的对话框中选择要插入的图表类型，并输入数据。对话框还支持一些其他的配置选项，例如图表标题，横轴标签等。
-- -------------------- ---- -------
-- -----------
------ ---------------- -
-- --------------------
---------------------- -------- -- -
---------------------------
------ --------
------ ----
------- ----
----- -
-
----- ----------
----- --------
------ ----
--
-
----- ----------
----- ---------
------ ------
-
--
--------- -------- --- -
------------------------------ ------ -
----- -------
------ -------------
------- ------------------------
---
------------
-
---
---
-实时预览
插入了图表之后，您可以通过单击图表来打开一个实时预览面板。这个面板将展示您的数据以及你配置的图表的样式。通过对这个预览面板进行微调，您可以快速地进行设计，确保您的图表看起来恰如其分。
-- -------------------- ---- -------
-- ----
-------- -
-------- ----------------
---------- ---------- -
--- ---- - ---
----------------- ----- --------------------- --- -
----------------------------- - -------------------------
---
----------------------------------------------
-
-总结
Graph-tinymce-plugin 是一个强大，易用的 TinyMCE 插件。它支持多种图表类型，并且提供了各种选项，以便您能够轻松地定制您的图表。如果您想在您的文档中添加图表，或者需要一个易用且功能齐全的图表编辑器，那么 graph-tinymce-plugin 将是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fa481e8991b448dcf84