dgf-tinymce-plugin

Diagram Factory TinyMCE Plugin.

Product Homepage

On the product homepage you will find a gallery with sample applications and tutorials. And you can work with a live installation of the Diagram Factory TinyMCE Plugin.

Installing

If you use npm, npm install dgf-tinymce-plugin. Otherwise, Download the latest release. You can load directly from dgfjs.org. For example:

``html

`
Or for the minified version:

`html

`

Setup TinyMCE with the Diagram Factory Plugin:

`html

















DGF with TinyMCE

<br /> <figure id="dgf_001" class="dgf mceNonEditable" contenteditable="false" data-dgf='{<br /> "reader":{<br /> "data":"x,y\nA,1\nB,4\nC,9,\nD,16\nE,25"<br /> },<br /> "extend":"dgf.setupBarDiagram"<br /> }'><br /> <figcaption class="mceEditable" contenteditable="true">New Diagram</figcaption><br /> </figure> <br />


``

When you display the above page in a web browser a bar diagram will be displayed inside the tinymce editor and the toolbar shows the diagram factory's button:
!Diagram Factory inside TinyMCE

When you double click the diagram a window opens. Here you can change the data and modify the diagram's attributes:
!Diagram Factory Reader Tab

To insert a new diagram press the dgf button and choose a diagram type:
!Diagram Factory New Diagram