Recent Changes - Search:
Cookbook-V1 /

HTMLAreaWiki

<< | Cookbook-V1 | >>

Note: The recipes here are for PmWiki versions 0.6 and 1.0 only. For PmWiki 2.0 recipes, see Cookbook.


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 [(approve links) edit diff] 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

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.3.33 -- Last modified by {{DanielUnterberger}}

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