毛片免费观看,日韩电影一本,在线观看福利姬

開源圖表庫HighCharts教程：如何將Highcharts編輯器集成到TinyMCE編輯器中

翻譯|使用教程|編輯：吳園園|2019-08-14 17:07:06.830|閱讀 777 次

概述：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中：