色欲老牛在线视频观看,欧美日韩国产五月天,色综合天天综合网天天狠天天

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

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

概述：Highcharts是純JavaScript編寫的開源圖表庫(kù)，為你的Web應(yīng)用程序提供直觀的、交互式圖表。本文將介紹如何將Highcharts編輯器集成到TinyMCE編輯器中,希望對(duì)您有所幫助。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

HighCharts教程：如何將Highcharts編輯器集成到TinyMCE編輯器中

點(diǎn)擊下載HighCharts最新試用版

TinyMCE是一個(gè)在LGPL下作為開源軟件發(fā)布的在線富文本編輯器。它可以輕松地將HTML textarea字段或其他HTML元素轉(zhuǎn)換為WYSIWYG編輯器實(shí)例。在本教程中，我們將向您展示如何使用簡(jiǎn)單的插件將Highcharts Charts Editor與TinyMCE編輯器集成。這將允許您在TinyMCE編輯器中創(chuàng)建交互式圖表，并在使用TinyMCE編輯器的任何地方嵌入這些圖表。

以下示例中的集成在本地計(jì)算機(jī)上完成，但完全相同的步驟適用于您的生產(chǎn)應(yīng)用程序。

注意！
您需要運(yùn)行Web服務(wù)器并測(cè)試集成。在本教程中，我使用Brackets編輯器，因?yàn)樗褂脙?nèi)部Web服務(wù)器提供實(shí)時(shí)預(yù)覽。

架構(gòu)

為了讓您了解全球架構(gòu)，讓我們來看看下面的圖片：

HighCharts教程：如何將Highcharts編輯器集成到TinyMCE編輯器中

全球架構(gòu)很簡(jiǎn)單; 有三個(gè)主要組成部分：

Highcharts編輯
TinyMCE插件
TinyMCE編輯

TinyMCE插件是Highcharts編輯器和TinyMCE編輯器之間的接口/鏈接。
Highcharts編輯器插件包括Highcharts編輯器和TinyMCE插件。

現(xiàn)在，您對(duì)主要組件有所了解; 讓我們?cè)O(shè)置項(xiàng)目。

首先，讓我們創(chuàng)建一個(gè)文件夾，我們將收集并運(yùn)行該項(xiàng)目.

HighCharts教程：如何將Highcharts編輯器集成到TinyMCE編輯器中

您將找到Highcharts編輯器和CSS文件。要設(shè)置TinyMCE編輯器，您需要指向編輯器和功能的鏈接。為此，創(chuàng)建一個(gè)文件，然后添加以下腳本：并創(chuàng)建一個(gè)文件，然后為TinyMCE版本5復(fù)制/粘貼以下代碼：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，請(qǐng)復(fù)制/粘貼此代碼：

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，請(qǐng)注意版本5 API引入了一些更改，包括向工具欄添加新選項(xiàng)。我們需要為它創(chuàng)建一個(gè)單獨(dú)的菜單選項(xiàng)，而不是將Highcharts插件集成到現(xiàn)有菜單中：

如何訪問Highcharts編輯器TinyMCE版本4。
如何訪問Highcharts編輯器TinyMCE第5版。

HighCharts教程：如何將Highcharts編輯器集成到TinyMCE編輯器中

要訪問不同的Highcharts圖表的類型和選項(xiàng)，請(qǐng)?zhí)砑右韵聨?kù)和模塊：

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>

這就對(duì)了; 所有組件都已設(shè)置完畢。現(xiàn)在，我所要做的就是使用Brackets中的實(shí)時(shí)預(yù)覽選項(xiàng)來運(yùn)行項(xiàng)目。

您還可以在CodeSandBox上嘗試實(shí)時(shí)版本。單擊Highcharts并將自己的交互式圖表添加到TinyMCE ediot中：