Dgf-tinymce-plugin NPM

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: