HTMLAREA for Wakka

[Note: HTMLArea is now apparently a commercial product. The codebase that was the start of HTMLarea (and may have been opensourced) is now under the name Areaedit (see http://www.formvista.com/otherprojects/areaedit.html) - 19 Aug 05]


This is a patch for WakkaWiki coded by VictorManuelVarela.

WakkaWiki a lightweight WikiEngine powered by PHP and MySQL, and developed by Hendrik Mans and Carlo Zotman. Good job!


Download Wakka with HTMLAREA

File: wakka-with-htmlarea.tgz

Note: You must set "default_handler" to "html" to run HTMLAREA in new pages.


Steps to use HTMLAREA in existing Wakka Wikis
1. Patching wakka.php
diff file for wakka.php:
*** ../wakka-subversion/wakka.php   Wed Jan 21 17:26:49 2004
--- wakka.php   Thu Jan 22 11:01:31 2004
***************
*** 120,126 ****
    function LoadPageTitles() { return $this->LoadAll("select distinct tag from ".$this->config["table_prefix"]."pages order by tag"); }
    function LoadAllPages() { return $this->LoadAll("select * from ".$this->config["table_prefix"]."pages where latest = 'Y' order by tag"); }
    function FullTextSearch($phrase) { return $this->LoadAll("select * from ".$this->config["table_prefix"]."pages where latest = 'Y' and match(tag, body) against('".mysql_escape_string($phrase)."')"); }
!   function SavePage($tag, $body, $comment_on = "")
    {
        // get current user
        $user = $this->GetUserName();
--- 120,126 ----
    function LoadPageTitles() { return $this->LoadAll("select distinct tag from ".$this->config["table_prefix"]."pages order by tag"); }
    function LoadAllPages() { return $this->LoadAll("select * from ".$this->config["table_prefix"]."pages where latest = 'Y' order by tag"); }
    function FullTextSearch($phrase) { return $this->LoadAll("select * from ".$this->config["table_prefix"]."pages where latest = 'Y' and match(tag, body) against('".mysql_escape_string($phrase)."')"); }
!   function SavePage($tag, $body, $comment_on = "", $handler="page")
    {
        // get current user
        $user = $this->GetUserName();
***************
*** 163,168 ****
--- 163,169 ----
                "owner = '".mysql_escape_string($owner)."', ".
                "user = '".mysql_escape_string($user)."', ".
                "latest = 'Y', ".
+               "handler = '".mysql_escape_string($handler)."', ".
                "body = '".mysql_escape_string(trim($body))."'");
        }
    }
***************
*** 352,358 ****
        {
            $method = substr($method, strrpos('/', $method));
        }
!       if (!$handler = $this->page["handler"]) $handler = "page";
        $methodLocation = $handler."/".$method.".php";
        return $this->IncludeBuffered($methodLocation, "<i>Unknown method \"$methodLocation\"</i>", "", $this->config["handler_path"]);
    }
--- 353,359 ----
        {
            $method = substr($method, strrpos('/', $method));
        }
!       if (!$handler = $this->page["handler"]) $handler = $this->config["default_handler"];
        $methodLocation = $handler."/".$method.".php";
        return $this->IncludeBuffered($methodLocation, "<i>Unknown method \"$methodLocation\"</i>", "", $this->config["handler_path"]);
    }
***************
*** 590,595 ****
--- 591,597 ----
 
    "action_path"           => "actions",
    "handler_path"          => "handlers",
+   "default_handler"   => "page",
 
    "header_action"         => "header",
    "footer_action"         => "footer",


Explanation:

search the SavePage() function, add a new $handler param (with "page" default value) and add a line in SQL insert command: handler = '$handler'
search the Method function, modify ($handler = "page") to ($handler = $this->config["default_handler"]
search the $wakkaConfig default value, add ("default_handler" => "page",)


2. Adding html formatter

formatters/html.php:
<?php

// This may look a bit strange, but all possible formatting tags have to be in a single regular expression for this to work correctly. Yup!

if (!function_exists("wakka2callback"))
{
    function wakka2callback($things)
    {
        $thing = $things[1];

        global $wakka;

        // forced links
        if (preg_match("/^\[\[(\S*)(\s+(.+))?\]\]$/", $thing, $matches))
        {
            list (, $url, , $text) = $matches;
            if ($url)
            {
                if (!$text) $text = $url;
                return $wakka->Link($url, "", $text);
            }
            else
            {
                return "";
            }
        }
        // events
        else if (preg_match("/^\{\{(.*?)\}\}$/s", $thing, $matches))
        {
            if ($matches[1])
                return $wakka->Action($matches[1]);
            else
                return "{{}}";
        }
        // interwiki links!
        else if (preg_match("/^[A-Z,ÄÖÜ][A-Z,a-z,ÄÖÜ,ßäöü]+[:]([A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)$/s", $thing))
        {
            return $wakka->Link($thing);
        }
        // wakka links!
        else if (preg_match("/^[A-Z,ÄÖÜ][a-z,ßäöü]+[A-Z,0-9,ÄÖÜ][A-Z,a-z,0-9,ÄÖÜ,ßäöü]*$/s", $thing))
        {
            return $wakka->Link($thing);
        }
        // if we reach this point, it must have been an accident.
        return $thing;
    }
}

$text = str_replace("\r", "", $text);
$text = trim($text)."\n";
$text = preg_replace_callback(
    "/(\[\[.*?\]\]|\b[a-z]+:\/\/\S+|\n\t+(-|[0-9,a-z,A-Z]+\))?|\{\{.*?\}\}|".
    "\b[A-Z,ÄÖÜ][A-Z,a-z,ÄÖÜ,ßäöü]+[:]([A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)\b|".
    "\b([A-Z,ÄÖÜ][a-z,ßäöü]+[A-Z,0-9,ÄÖÜ][A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)\b|".
    "\n)/ms", "wakka2callback", $text);

// we're cutting the last <br>
$text = preg_replace("/<br \/>$/", "", trim($text));
print($text);
?>


Explanation:

delete all HTML related stuff to show html as is.
delete all Wiki related stuff (except WakkaLinks and WakkaActions)



3. Adding html handler

Copy handlers/page.dialog {
color: ButtonText;
background: ButtonFace;
}

.dialog .content { padding: 2px; }

.dialog, .dialog button, .dialog input, .dialog select, .dialog textarea, .dialog table {
font: 11px Tahoma,Verdana,sans-serif;
}

.dialog table { border-collapse: collapse; }

.dialog .title {
background: #008;
color: #ff8;
border-bottom: 1px solid #000;
padding: 1px 0px 2px 5px;
font-size: 12px;
font-weight: bold;
cursor: default;
}

.dialog .title .button {
float: right;
border: 1px solid #66a;
padding: 0px 1px 0px 2px;
margin-right: 1px;
color: #fff;
text-align: center;
}

.dialog .title .button-hilite { border-color: #88f; background: #44c; }

.dialog button {
width: 5em;
padding: 0px;
}

.dialog .buttonColor {
padding: 1px;
cursor: default;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}

.dialog .buttonColor-hilite {
border-color: #000;
}

.dialog .buttonColor .chooser, .dialog .buttonColor .nocolor {
height: 0.6em;
border: 1px solid;
padding: 0px 1em;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

.dialog .buttonColor .nocolor { padding: 0px; }
.dialog .buttonColor .nocolor-hilite { background-color: #fff; color: #f00; }

.dialog .label { text-align: right; width: 6em; }
.dialog .value input { width: 100%; }
.dialog .buttons { text-align: right; padding: 2px 4px 0px 4px; }

.dialog legend { font-weight: bold; }
.dialog fieldset table { margin: 2px 0px; }

.popupdiv {
border: 2px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}

.popupwin {
padding: 0px;
margin: 0px;
}

.popupwin .title {
background: #fff;
color: #000;
font-weight: bold;
font-size: 120%;
padding: 3px 10px;
margin-bottom: 10px;
border-bottom: 1px solid black;
letter-spacing: 2px;
}
%%


6. Set your wakka.config.php

Set the new default_handler to "html" to activate HTMLAREA in new pages.
To change an existing page to HTML handler you must run the next query:

UPDATE wakka_pages
SET handler = 'html'
WHERE tag = 'ExistingPage' AND latest = 'Y'



Esta página no tiene comentarios. [Mostrar comentarios/formulario]
Comments
Comment by natpool-65-39-13-99.lakeheadu.ca
2004-04-11 19:16:04
Hi everybody.

I got this addition of HTMLArea working....altho' it took me some number of days (I'm a code hacker, not a programmer). There were two biggish things that needed addressing (at least on my server). (i) You need to use absolute as opposed to relative path names (such as in src="'.$this->config['base_url'].'/htmlarea/htmlarea.js" where I had to put in src="http://www.myserver.com/mydirectory/htmlarea/htmlarea.js"), and (ii) if htmlarea is used with a "font" dropdown list, you have to edit the htmlarea.js file so that fonts have a space after the comma (such that "verdana,helvetica,arial" becomes "verdana, helvetica, arial") elsewise they get recognized by as a wikiname.

If you're interested in adding Wei's imagemanager/editor (http://www.zhuo.org/htmlarea/) which in my view is a great addition and solves the image upload problem quite nicely then there's another change needed too....

I had to further edit the html/edit.php file and add the plugin reference there (instead of in the file before the <body> tag as Wei's instructions indicate). Therefore, my edit.php file looked like this (including using absolute references as indicated above)....

'<script language="JavaScript" src="http://www.myserver.net/wakkadirectory/htmlarea/htmlarea.js"></script>'."\n". '<script language="JavaScript" src="http://www.myserver.net/wakkadirectory/htmlarea/dialog.js"></script>'."\n". '<script language="JavaScript" src="http://www.myserver.net/wakkadirectory/htmlarea/popups/en/htmlarea-lang.js"></script>'."\n". '<script type="text/javascript">HTMLArea.loadPlugin("ImageManager")</script>'."\n";


I'm still having a problem with getting linking to work, and the "showhtml code" link crashes the browser in the "large window" version. Otherwise it works fine.

cheers,

mb
Comment by JsnX
2004-04-19 01:20:11
Thanks for the tips. I tried HTMLArea, but it seemed too resource heavy and slow. Slow and heavy is not a good much for Wakka/Wikka, which is famous for being quick and lightweight.
Comment by TestTrade
2004-10-20 05:51:48
What about something like TinyMCE?
Comment by ChristianBarthelemy
2005-01-07 18:40:30
A good list of available WYSIWYG engines at http://www.bris.ac.uk/is/projects/cms/ttw/ttw.html - TinyMCE isn't listed thought.
Comment by PolVazo
2005-02-14 16:16:03
FCKeditor looks good too - am testing this and TinyMCE at present.
Comment by GmBowen
2005-02-14 16:30:15
hey, when you've sorted out all the bugs I would REALLY like to hear about your experiences doing this. WYSIWYG in this wiki is a big long-term goal of mine.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki