Package Exports

dgf-tinymce-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dgf-tinymce-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

<script src="https://dgfjs.org/dgf-tinymce-plugin.js"></script>

Or for the minified version:

<script src="https://dgfjs.org/dgf-tinymce-plugin.min.js"></script>

Setup TinyMCE with the Diagram Factory Plugin:

<html>
<head>
    <title>DGF with TinyMCE</title>
    
    <!-- Add D3, TinyMCE and DGF -->		
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
    <script src="https://dgfjs.org/dgf.min.js"></script>
    
    <!-- Initialize DGF and add the DGF Plugin to TinyMCE -->
    <script>
    dgf.init({
        setups: [
            dgf.setupD3,
            dgf.setupDGF,
            dgf.setupBasic,
            dgf.setupD3ScaleChromatic,
            dgf.setupHierarchic,
            dgf.setupMultiSeries,
            dgf.setupTime,
            dgf.setupGallery
        ]
    });
    
    tinymce.init({
        selector:"textarea",
        external_plugins: {
            "dgf": "https://dgfjs.org/dgf-tinymce-plugin.min.js"
        },
        toolbar: "undo redo | alignleft aligncenter alignright alignjustify | dgf",
        height: 600,
        content_css : "https://dgfjs.org/dgf.css"
    });
    </script>
    
    <link rel="stylesheet" type="text/css" href="https://dgfjs.org/dgf.css">
</head>
<body>
    <h2>DGF with TinyMCE</h2>

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

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:

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