开源图表库HighCharts教程：如何将Highcharts编辑器集成到TinyMCE编辑器中-控件新闻-慧都网

开源图表库HighCharts教程：如何将Highcharts编辑器集成到TinyMCE编辑器中

翻译|使用教程|编辑：吴园园|2019-08-14 17:07:06.830|阅读 721 次

概述：Highcharts是纯JavaScript编写的开源图表库，为你的Web应用程序提供直观的、交互式图表。本文将介绍如何将Highcharts编辑器集成到TinyMCE编辑器中,希望对您有所帮助。

相关链接：

HighCharts教程：如何将Highcharts编辑器集成到TinyMCE编辑器中

TinyMCE是一个在LGPL下作为开源软件发布的在线富文本编辑器。它可以轻松地将HTML textarea字段或其他HTML元素转换为WYSIWYG编辑器实例。在本教程中，我们将向您展示如何使用简单的插件将Highcharts Charts Editor与TinyMCE编辑器集成。这将允许您在TinyMCE编辑器中创建交互式图表，并在使用TinyMCE编辑器的任何地方嵌入这些图表。

以下示例中的集成在本地计算机上完成，但完全相同的步骤适用于您的生产应用程序。

注意！
您需要运行Web服务器并测试集成。在本教程中，我使用Brackets编辑器，因为它使用内部Web服务器提供实时预览。

架构

为了让您了解全球架构，让我们来看看下面的图片：

HighCharts教程：如何将Highcharts编辑器集成到TinyMCE编辑器中

全球架构很简单; 有三个主要组成部分：

Highcharts编辑
TinyMCE插件
TinyMCE编辑

TinyMCE插件是Highcharts编辑器和TinyMCE编辑器之间的接口/链接。
Highcharts编辑器插件包括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教程：如何将Highcharts编辑器集成到TinyMCE编辑器中

要访问不同的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 = “//code.highcharts.com/stock/highstock.js” type = “text / javascript” charset = “utf-8” > </ script> <script src = “//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 = “//code.highcharts.com/highcharts-3d.js” type = “text / javascript” charset = “utf- 8“ > </ script> <script src = ”//code.highcharts.com/modules/exporting.js“ > </ script> <script src = ”//code.highcharts.com/modules/ funnel.js“ > </ script> <script src = ”//code.highcharts.com/modules/solid-gauge.js“ > </ script><script src = “highcharts-editor.min.js” 
   > </ script> <script src = “//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中：