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:
  1. Download CKeditor package (for example, CKEditor 3.6.5).
  2. Unzip it somewhere and move ckeditor directory to a dedicated place, for example in htdocs/ckeditor/.
  3. Download plantumlPluginForCKEditor.zip file
  4. Unzip this file to htdocs/ckeditor/plugins directory
  5. Check that in htdocs/ckeditor/plugins/plantuml directory, you have the following files: htdocs/ckeditor/plugins/plantuml images/
    plugin.js
  6. Add the following code into your HTML pages, in the <head> section:
    <!-- ckeditor -->
    	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <!-- /ckeditor -->
  7. 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>
    
  8. Load your HTML file in your browser & enjoy.


Privacy Policy      Advertise