Highcharts是纯JavaScript编写的开源图表库，为你的Web应用程序提供直观的、交互式图表。本文将介绍如何将Highcharts编辑器集成到TinyMCE编辑器中,希望对您有所帮助。
HighCharts最新试用版
TinyMCE是一个在LGPL下作为开源软件发布的在线富文本编辑器。它可以轻松地将HTML textarea字段或其他HTML元素转换为WYSIWYG编辑器实例。在本教程中，我们将向您展示如何使用简单的插件将Highcharts Charts Editor与TinyMCE编辑器集成。这将允许您在TinyMCE编辑器中创建交互式图表，并在使用TinyMCE编辑器的任何地方嵌入这些图表。
以下示例中的集成在本地计算机上完成，但完全相同的步骤适用于您的生产应用程序。
注意！
您需要运行Web服务器并测试集成。在本教程中，我使用Brackets编辑器，因为它使用内部Web服务器提供实时预览。
架构
为了让您了解全球架构，让我们来看看下面的图片：
全球架构很简单; 有三个主要组成部分：
-
Highcharts编辑
-
TinyMCE插件
-
TinyMCE编辑
TinyMCE插件是Highcharts编辑器和TinyMCE编辑器之间的接口/链接。
Highcharts编辑器插件包括Highcharts编辑器和TinyMCE插件。
现在，您对主要组件有所了解; 让我们设置项目。
首先，让我们创建一个文件夹，我们将收集并运行该项目.
您将找到Highcharts编辑器和CSS文件。要设置TinyMCE编辑器，您需要指向编辑器和功能的链接。为此，创建一个文件，然后添加以下脚本：并创建一个文件，然后为TinyMCE版本5复制/粘贴以下代码：highcharts-editor.min.dist
tinymce.initindex.html
main.js
tinymce.init({
selector: "#chart-result",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste",
"highcharts highchartssvg noneditable"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
menubar: "file edit insert view format table tools help highcharts",
menu: {
highcharts: {
title: "Highcharts",
items: "highcharts"
})});
如果您使用的是TinyMCE版本4，请复制/粘贴此代码：
tinymce 。init （{ selector ：'＃chart-result' ， height ：550 ， plugins ：[ 'advlist autolink list links image charmap print preview anchor' ，'searchreplace visualblocks code fullscreen' ，'insertdatetime media table contextmenu paste' ，'highcharts highchartssvg noneditable ' ]， toolbar ：'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image' }）;
注意！
如果您以前使用过TinyMCE版本4，请注意版本5 API引入了一些更改，包括向工具栏添加新选项。我们需要为它创建一个单独的菜单选项，而不是将Highcharts插件集成到现有菜单中：
-
如何访问Highcharts编辑器TinyMCE版本4。
-
如何访问Highcharts编辑器TinyMCE第5版。
要访问不同的Highcharts图表的类型和选项，请添加以下库和模块：
-
highstock.js
-
highcharts-more.js
-
highcharts-3d.js
-
模块/ data.js
-
模块/ exporting.js
-
模块/ funnel.js
-
模块/固gauge.js
决赛将如下：index.html
<HTML> <link href = “highcharts-editor.min.css” rel = “stylesheet” type = “text / css” /> <script src = “http://code.highcharts.com/stock/highstock.js” type = “text / javascript” charset = “utf-8” > </ script> <script src = “https://code.highcharts.com/modules/data.js” type = “text / javascript” charset = “utf- 8“ > </ script> <script src = ”https：//code.highcharts.com/highcharts-more.js” 类型= “text / javascript” charset = “utf-8” > </ script> <script src = “https://code.highcharts.com/highcharts-3d.js” type = “text / javascript” charset = “utf- 8“ > </ script> <script src = ”https://code.highcharts.com/modules/exporting.js“ > </ script> <script src = ”https://code.highcharts.com/modules/ funnel.js“ > </ script> <script src = ”https://code.highcharts.com/modules/solid-gauge.js“ > </ script><script src = “highcharts-editor.min.js” > </ script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.6/tinymce.min.js” > </ script> <script src = “highcharts-editor。 tinymce.js“ > </ script> <script src = ”main.js“ > </ script> <body> <textarea id = “chart-result” > </ textarea> </ body></ HTML>
这就对了; 所有组件都已设置完毕。现在，我所要做的就是使用Brackets中的实时预览选项来运行项目。
您还可以在CodeSandBox上尝试实时版本。单击Highcharts并将自己的交互式图表添加到TinyMCE ediot中：
以上就是如何将Highcharts编辑器集成到TinyMCE编辑器中的完整教程，感兴趣的朋友赶快下载体验吧~
想要购买Highcharts正版授权的朋友可以咨询官方客服。
更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！