dgf-tinymce-plugin
v0.9.82
Published
Diagram Factory TinyMCE Plugin
Downloads
1
Maintainers
thmuflReadme
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:
To insert a new diagram press the dgf button and choose a diagram type:
