HOME      NEWS      MAP

TinyMCE Editor

You can use a plugin for TinyMCE Editor to add UML into your editor.

Demo

First, let's start by a working example:

Installation

The installation is quite simple:
  1. Download TinyMCE package (for example, TinyMCE 3.5.7).
  2. Unzip it somewhere and move tiny_mce directory to a dedicated place, for example in htdocs/tiny_mce/.
  3. Download plantumlPluginForTinyMCE.zip file
  4. Unzip this file to htdocs/tiny_mce/plugins directory
  5. Check that in htdocs/tiny_mce/plugins/plantuml directory, you have the following files: htdocs/tiny_mce/plugins/plantuml img/
    js/
    langs/
    dialog.htm
    editor_plugin.js
    editor_plugin_src.js
  6. Add the following code into your HTML pages, in the <head> section:
    <!-- TinyMCE -->
    <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
    	tinyMCE.init({
    		mode : "textareas",
    		theme : "advanced",
    theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,separator,numlist,bullist,outdent,indent,separator,forecolor,backcolor,separator,hr,link,unlink,image,code,separator,plantuml",
    		plugins : 'plantuml',   
    	});
    </script>
    <!-- /TinyMCE -->
    
  7. Add the following code into your HTML pages, somewhere in the <body> section:
    	<textarea id="elm1" name="elm1" rows="24" cols="80" style="width: 80%">
    	</textarea>
    
  8. Load your HTML file in your browser & enjoy.

HOME      NEWS      MAP