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
ckeditor
directory to a dedicated place, for example in htdocs/ckeditor/
. - Download plantumlPluginForCKEditor.zip file
- Unzip this file to
htdocs/ckeditor/plugins
directory - Check that in
htdocs/ckeditor/plugins/plantuml
directory, you have the following files: htdocs/ckeditor/plugins/plantuml
images/
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.