KupuEditorAddOn version 1.0b4.1
Previously, we worked on
TwysiwygEditor?. This was an original approach of WYSIWYG editor integration based on Java Web Start and Web services. Unfortunately, despite Java Doc says "
The purpose of HTMLDocument model is to support both browsing and editing ", HTML Java API (1.4) was so buggy that we work now on a solution based on Kupu (
http://kupu.oscom.org).
Kupu is a JavaScript HTML editor compatible with Mozilla & IE. To save content of topic from HTML to TWiki syntax, we use a JavaScript modified version of the translator written in Java by Frederic Luddeni.
CVS :
Berlios
Features
- Kupu XHTML WYSIWYG Editor 1.1.1
- TWikiML source edition
- TWiki variables are rendered in green boxes
- Internal links are rendered in blue boxes
- List of already existing topics for links insertion
- Attachments management is embedded in topic edition
- Attachment reference insertion done by a click (image are shown, other files appears as links)
- Extensible icons insertion browser
- TWiki variables insertion facilities
- Catch automatically WikiWords and InterWiki links
- Completion during WikiWords (or InterWiki links) insertion
Screenshots
Prerequisites
Installation
- Download the ZIP file (see below)
- Unzip
KupuEditorAddOn.zip in your twiki installation directory. Content:
| File: | Description: |
|---|
bin/kupuedit | KupuEditorAddOn host script |
bin/kupu_attachments | attachments management script |
bin/kupu_html2twiki | XHTML page open script |
bin/kupu_twiki2html | topic save script |
data/kupu_imgmap.cfg | icons configuration file |
data/kupu_varmap.cfg | variables configuration file |
data/TWiki/KupuEditorAddOn.txt | this topic |
KupuEditorAddOn/doc/INTEGRATION.txt | notes about integration of Kupu |
KupuEditorAddOn/doc/kupu/CHANGES.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/CONTRIBUTING.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/CREDITS.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/CUSTOMIZING.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/EXTENDING.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/FAQ.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/INSTALL.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/JSAPI.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/LIBRARIES.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/LICENSE.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/OLDBROWSERS.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/README.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/ROADMAP.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/STYLEGUIDE.txt | Kupu notes |
KupuEditorAddOn/doc/kupu/TEMPLATE-SYSTEM.txt | Kupu notes |
KupuEditorAddOn/doc/LICENSE.txt | GPL license |
lib/TWiki/Contrib/KupuEditorAddOn/build.pl | |
lib/TWiki/Contrib/KupuEditorAddOn/Html2TWiki.pm | KupuEditorAddOn XHTML open module |
lib/TWiki/Contrib/KupuEditorAddOn/TWiki2Html.pm | KupuEditorAddOn topic save module |
lib/TWiki/Contrib/KupuEditorAddOn/UI.pm | KupuEditorAddOn user interface module |
lib/TWiki/Contrib/KupuEditorAddOn.pm | KupuEditorAddOn main module |
pub/TWiki/KupuEditorAddOn/capture1.JPG | screenshot |
pub/TWiki/KupuEditorAddOn/capture2.JPG | screenshot |
pub/_kupu/kupubasetools.js | Kupu program |
pub/_kupu/kupucontentfilters.js | Kupu program |
pub/_kupu/kupucontextmenu.js | Kupu program |
pub/_kupu/kupueditor.js | Kupu program |
pub/_kupu/kupuhelpers.js | Kupu program |
pub/_kupu/kupuimages/bgcolor.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/bold.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/centre.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/definitionlist.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/definitionlist.png | Kupu toolbar icon |
pub/_kupu/kupuimages/exit.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/hr.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/hyperlink.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/image.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/indent.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/italic.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/kupusearch_icon.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/kupu_icon.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/left_just.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/list.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/numbered.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/outdent.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/redo.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/remove.png | Kupu toolbar icon |
pub/_kupu/kupuimages/right_just.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/save.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/smiley.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/source.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/space.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/subscript.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/superscript.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/table.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/textcolor.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/toolbox.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/underline.gif | Kupu toolbar icon |
pub/_kupu/kupuimages/undo.gif | Kupu toolbar icon |
pub/_kupu/kupuinit.js | Kupu program |
pub/_kupu/kupuinit_form.js | Kupu program |
pub/_kupu/kupuinspector.js | Kupu program |
pub/_kupu/kupuloggers.js | Kupu program |
pub/_kupu/kupusaveonpart.js | Kupu program |
pub/_kupu/kupusourceedit.js | Kupu program |
pub/_kupu/kupustart.js | Kupu program |
pub/_kupu/kupustart_form.js | Kupu program |
pub/_kupu/kuputranslator.js | XHTML/TWikiML translator |
pub/_kupu/kuputwiki.css | KupuEditorAddOn CSS classes |
pub/_kupu/kuputwikitools.js | TWiki dedicated functions |
pub/_kupu/sarissa.js | Kupu program |
templates/kupu.tmpl | KupuEditorAddOn main template |
templates/kupuedit.dragon.tmpl | Dragon skin template |
templates/kupuedit.pattern.tmpl | Pattern skin template |
templates/kupuedit.tmpl | Classic skin template |
- Perl installation procedure
cd <TWIKI_ROOT_DIR>
perl KupuEditorAddOn_installer.pl install
It will automatically set up permissions.
If Perl is not located in /usr/bin/perl or if you use ActivePerl for Windows for example,
you must modify
bin scripts shebangs. Here are the concerned scripts :
bin/kupu_attachments
bin/kupu_html2twiki
bin/kupu_twiki2html
bin/kupuedit
.htaccess is used by Apache to control access to scripts. If you enabled it, you will need to add
KupuEditorAddOn scripts (
kupuedit,
kupu_attachments,
kupu_twiki2html and
kupu_html2twiki).
<Files "kupuedit">
require valid-user
</Files>
<Files "kupu_twiki2html">
require valid-user
</Files>
<Files "kupu_html2twiki">
require valid-user
</Files>
<Files "kupu_attachments">
require valid-user
</Files>
If you enabled htdigest password support, add these scripts to AuthDigestDomain scripts list.
If you want to use a charset different than ISO-8859-1 'latin1' or UTF-8, you must have Perl 5.8 installed
or you have to install
Unicode::MapUTF8.
- Modifying view TWiki template
Modify
view.tmpl TWiki template to add a 'Kupu Edit' link in your pages (or view.SKIN.tmpl, SKIN meaning your current skin).
Here is an example of line to add in your template file :
<a href="%SCRIPTURLPATH%/kupuedit%SCRIPTSUFFIX%/%WEB%/%TOPIC%">Kupu Edit</a>
Uninstalling
cd <TWIKI_ROOT_DIR>
perl KupuEditorAddOn_installer.pl uninstall
Customisation
Topic names loaded in Kupu
Delete line
%KUPU{"ALLTOPICS"}% (151) in
kupu.tmpl template to avoid retrieving all topics in all webs. InterWiki links' completion will be affected.
Extending variables list in Kupu
Edit
data/kupu_varmap.cfg and add variables according to this syntax :
var description
The first space is the separator.
Extending TWiki icons in Kupu
In the same way as variables, edit
data/kupu_imgmap.cfg and add icons according to this syntax :
characters location
This will catch corresponding strings and display the icon instead.
The icons panel in Kupu will display new icons too. The first space is the separator.
Enabling/disabling tools
There are in
pub/_kupu/ CSS classes of
KupuEditorAddOn (
kuputwiki.css). You can make some of Kupu intials tools enabled
if you remove
display:none instructions.
Notes
Avoiding WikiWord being catched
Put
! behind WikiWord or InterWiki link to avoid it being catched.
Links completion
During link completion, press
-> to go to the end of the completed word.
Variables edition
In Mozilla, to edit after a variable on the same line, press
Enter in the variable's green box.
Source edition
You can save the TWikiML source you are editing. It can be useful if XHML/TWikiML translation doesn't give the result you expected.
HTML Tables translation
You will probably see that some tables are not translated during XHTML/TWikiML translation.
This is the case if there are bullets, line jumps or inner tables inside.
TWikiML to HTML translation
Some elements are not translated yet. Code styled texts, "nops", verbatim blocks and definitions lists are not managed.
Add-On Info
Related Topic: TWikiAddOns?
