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:

You can click on "UML" button in the toolbar to add a new diagram. You can also select an image, and click on this same button to edit the diagram. <img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.plantuml.com/plantuml/img/SyfFKj2rKt3CoKnE1G00" alt="Bob -> Alice" /> You can also select a text diagram, and then click on "UML" button to generate the diagram: @startuml class Foo @enduml Very easy to used and to integrate.

Installation

The installation is quite simple:

Download TinyMCE package (for example, TinyMCE 3.5.7).
Unzip it somewhere and move tiny_mce directory to a dedicated place, for example in htdocs/tiny_mce/.
Download plantumlPluginForTinyMCE.zip file
Unzip this file to htdocs/tiny_mce/plugins directory
Check that in htdocs/tiny_mce/plugins/plantuml directory, you have the following files: htdocs/tiny_mce/plugins/plantumlimg/
js/
langs/
dialog.htm
editor_plugin.js
editor_plugin_src.js

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 -->

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>

Load your HTML file in your browser & enjoy.