CKeditor
You can use a plugin for CKeditor to add UML into your editor.Demo
First, let's start by a working example:
Installation
The installation is quite simple:- Download CKeditor package (for example, CKEditor 3.6.5).
- Unzip it somewhere and move
ckeditordirectory to a dedicated place, for example inhtdocs/ckeditor/. - Download plantumlPluginForCKEditor.zip file
- Unzip this file to
htdocs/ckeditor/pluginsdirectory - Check that in
htdocs/ckeditor/plugins/plantumldirectory, you have the following files:htdocs/ckeditor/plugins/plantumlimages/
plugin.js
- Add the following code into your HTML pages, in the
<head>section:<!-- ckeditor --> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <!-- /ckeditor -->
- Add the following code into your HTML pages, somewhere in the
<body>section:<textarea cols="80" id="editor_kama" name="editor_kama" rows="20" > </textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'editor_kama', { extraPlugins : 'plantuml', toolbar : [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'], ['About','-','Plantuml'] ] }); //]]> </script> - Load your HTML file in your browser & enjoy.