• View
• Edit
• History
• Attach
• Print

HTMLAreaWiki

HTMLAreaWiki

Goal

To integrate a WYSIWYG editor into PmWiki/PmWiki

Solution

I have used htmlArea, a free script to provide the functionality. This uses Version 3 (beta) for IE 5.5+ (Windows)/Mozilla 1.3 (all OS) cross platform functionality.

Comment from Daniel Unterberger

As this Cookbook is quite outdated V1, i have a similar solution, which is implemented differently at Cookbook.ConvertHTML and working with PmWiki 2.x . No Changes in httpd.conf needed, also working quite good with IE5+ and Moz. It Adds another Field for HTML and keeps old Wiki-Field so it doesnt change your old pages. Search has to be optimized. ...

Files

Attach:HTMLArea.zip Δ (This wont upload for me, it is too big! (119 kb) Get it from the site mentioned below).

Limitations

• This is purely experimental!
• This will mangle existing content if you edit it after installation of the RTF control. It will display properly though.
  • You can create a page, using 'HTML Source' view, using classic Wiki markup. The next time you edit it though, it gets mangled.
• This is probably a good time to mention other things this breaks, or why this is for experimentation only.
• The pop-ups don't size correctly on my system, (1024 x 768), resulting in partially hidden, though still usable, buttons.
• The Un-Do & Re-Do buttons don't appear to work.
• The Wiki link format needs changing, so PmWiki 'image links' no longer work.
• The Double Bracket Notation [[link Text]] stops working
• If you paste in content, any links will not work. You can fix them though.
• Groups have to be referenced as Group/PageName, Group.PageName doesn't display correctly.
• Only tested under Windows XP, IE 6, your mileage may vary.
• Sometimes, the tool-bar icons won't load. (IE 6).
• Uses the now deprecated <font> tag for setting the font face
• Occasionally, the browser appears to hang, another reason why this should not be implemented in a production environment.
• Using this all on my local PC, I see a flash of raw HTML. How this will perform across a slow network, I have no idea.
• Did I mention this is experimental?
• Add more to this list when you find them.

Features

• htmlArea is a WYSIWYG editor replacement for any <textarea> field. Instead of teaching your software users how to code basic HTML to format their content, they can use htmlArea to:
  • Format text to be bold, italicised, or underlined.
  • Change the face, size and colour.
  • Left, centre, or right-justify paragraphs.
  • Make bulleted or numbered lists.
  • Indent or un-indent paragraphs
  • Insert a horizontal line.
  • Insert hyperlinks and images.
  • Insert tables
  • View the raw HTML source of what they're editing.
• You can also create your own buttons to insert custom blocks of HTML code and images.
• htmlArea is provided by http://www.interactivetools.com(approve links) completely free.
• I stumbled upon a very simple way to add CSS via one line in the local.php
• Alleged cross platform functionality...

Installation

This took some doing :o)

Pre-requisites & Assumptions

• This was done on my laptop running Windows XP service Pack 1.
• Apache Version 1.3.27 is installed & working
• Windows versions of the diff & patch utilities are installed & working
• PmWiki/PmWiki is installed & working.

Download the attached zip file unzip it to a folder called htmlArea from the Wiki root e.g. /Wiki/htmlArea

Copy all the folders in /htmlArea to the root.

Note:If you move them, certain functions do not work, so take the hit on your disk space (169 Kb) & copy them.

Add an alias in your Apache httpd.conf file

  Alias /htmlArea "C:/_Wiki/htmlArea"

Next step;copy the following lines into your local.php:

      ## $InlineReplacements - Needed as I have removed a line in PmWiki.php that stops 'manual line breaks' working.
     $InlineReplacements['/\\[\\[<<\\]\\]/'] = "<br clear='all' />";

     $HTMLHeaderFmt.="<style type=\"text/css\">@import url(/htmlarea/htmlarea.css)</style>";

     $PageEditFmt.="<script type=\"text/javascript\" src=\"/htmlarea/htmlarea.js\"></script>    
        <script type=\"text/javascript\" src=\"/htmlarea/dialog.js\"></script>    
        <script type=\"text/javascript\" src=\"/htmlarea/lang/en.js\"></script>    
        <script type=\"text/javascript\" defer=\"1\">        
            HTMLArea.replaceAll();    
        </script>";

     ## Change the URL format so the insert image/link buttons work.
     ## May be better to disable the buttons instead.
     $UrlImgFmt = "\$Url";
     $UrlLinkFmt = "\$Url";

     ## Turn off the EnablePathInfo Function so the editor finds the proper folders.
     ## To be perfectly honest, I don't know why this is required...
     $EnablePathInfo=0;

Find the function in pmWiki.php PrintText and comment out the following line: (line number 700 in pmwiki-0.5.26)

This stops pmWiki replacing the html characters this editor produces. //$text = htmlspecialchars($text,ENT_NOQUOTES);

Edit htmlArea/htmlarea.js, changing lines 53 & 54 to:

     
    this.imgURL = "/wiki/images/";
    this.popupURL = "/wiki/popups/";

Copy reference.html from the htmlArea folder to the wiki root folder, so the help button works. It may be better to replace it with a better help file...

Usage

It's WYSIWYG... :0)

See Also

• http://www.interactivetools.com/products/htmlarea/(approve links).
• [http://sourceforge.net/projects/itools-htmlarea/ htmlArea SourceForge project].
• http://www.iespell.com - A useful addition whether you use htmlArea or not.

History

First attempt

Discussion forum

A place for anyone to discuss this functionality.

Comments, Bugs

Sooo many, I added a limitations section near the top.

Contributors

• Dave Jackson

Copyright

© copyright Dave Jackson 2004

pmwiki-2.2.36 -- Last modified by {{DanielUnterberger}}

from IP: 85.171.160.186 ip should be disabled by default for security reasons