Revision history for HtmlAreaEditing


Revision [19438]

Last edited on 2008-01-28 00:16:01 by JavaWoman [Modified links pointing to docs server]

No Differences

Revision [17828]

Edited on 2007-12-12 12:34:47 by JavaWoman [preventing unintended wanted pages links]
Additions:
insert javascript code to init HTMLArea
HTMLAREA is an easy JavaScript WYSIWYG editor created by Interactive Tools
WHERE tag = '""ExistingPage""' AND latest = 'Y'
Deletions:
insert javascript code to init HtmlArea
HTMLAREA is an easy JavaScript? WYSIWYG editor created by Interactive Tools
WHERE tag = 'ExistingPage?' AND latest = 'Y'

Revision [17806]

Edited on 2007-12-12 10:14:32 by JavaWoman [prevent function references looking as page links]
Additions:
search the ""SavePage()"" function, add a new $handler param (with "page" default value) and add a line in SQL insert command: handler = '$handler'
add 'html' to ""SavePage()"" call.
Deletions:
search the SavePage function, add a new $handler param (with "page" default value) and add a line in SQL insert command: handler = '$handler'
add 'html' to SavePage call.

Revision [16929]

Edited on 2007-05-31 23:27:22 by GmBowen [Reverted]
Additions:
+ "handler = '".mysql_escape_string($handler)."', ".
+ "default_handler" => "page",
if (preg_match("/^\[\[(\S*)(\s+(.+))?\]\]$/", $thing, $matches))
else if (preg_match("/^[A-Z,ÄÖÜ][A-Z,a-z,ÄÖÜ,ßäöü]+[:]([A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)$/s", $thing))
else if (preg_match("/^[A-Z,ÄÖÜ][a-z,ßäöü]+[A-Z,0-9,ÄÖÜ][A-Z,a-z,0-9,ÄÖÜ,ßäöü]*$/s", $thing))
"/(\[\[.*?\]\]|\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|".
+ $output .=
+ '<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/htmlarea.js"></script>'."\n".
+ '<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/dialog.js"></script>'."\n".
+ '<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/popups/en/htmlarea-lang.js"></script>'."\n";
+
+ $output .= "<script language=\"JavaScript\">\n".
+ "<!--\n".
+ "var editor=new HTMLArea(\"body\");\n".
+ "editor.config.editorURL = \"{$this->config['base_url']}/htmlarea/\";\n".
+ "editor.config.imgURL = \"images/\";\n".
+ "editor.config.popupURL = \"popups/en/\";\n".
+ "editor.config.bodyDirection = \"ltr\";\n".
+ 'editor.config.toolbar = [[ "formatblock", "space", "bold", "italic", "underline", "separator", "copy", "cut", "paste", "space", "undo", "redo", "separator", "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator", "forecolor", "separator", "inserthorizontalrule", "createlink", "insertimage", "inserttable" ]];'."\n".
+ "editor.generate();\n".
+ "//-->\n".
+ "</script>\n";
if ($this->HasAccess("write") && ($this->page["latest"] == "N"))
--- 21,27 ----
! print($this->Format($this->page["body"], "html"));
if ($this->HasAccess("write") && ($this->page["latest"] == "N"))
add 'html' to SavePage call.
insert javascript links to htmlarea.js, dialog.js, and popups/en/htmlarea-lang.js before textarea
insert javascript code to init HtmlArea
change 'wakka' to 'html' in Format call (when formatting body).
4. Install HTMLAREA into your wakka root path
Download htmlarea.tgz
HTMLAREA is an easy JavaScript? WYSIWYG editor created by Interactive Tools
5. Add classes for HTMLAREA in your wakka.css
.htmlarea { background: #fff; }
.htmlarea .toolbar {
cursor: default;
background: #F8F8F8;
padding: 3px;
.htmlarea .toolbar table { font-family: tahoma,verdana,sans-serif; font-size: 11px; }
.htmlarea .toolbar img { border: none; }
.htmlarea .toolbar .label { padding: 0px 3px; }
.htmlarea .toolbar .button {
background: #F8F8F8;
color: ButtonText;
border: 1px solid #F8F8F8;
padding: 1px;
margin: 0px;
.htmlarea .toolbar .buttonHover {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
.htmlarea .toolbar .buttonActive, .htmlarea .toolbar .buttonPressed {
padding: 2px 0px 0px 2px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
.htmlarea .toolbar .buttonPressed {
background: ButtonHighlight;
.htmlarea .toolbar .indicator {
padding: 0px 3px;
overflow: hidden;
width: 20px;
text-align: center;
cursor: default;
border: 1px solid ButtonShadow;
.htmlarea .toolbar .buttonDisabled { background-color: #aaa; }
.htmlarea .toolbar .buttonDisabled img {
filter: alpha(opacity = 25);
-moz-opacity: 25%;
.htmlarea .toolbar .separator {
position: relative;
margin: 3px;
border-left: 1px solid ButtonShadow;
border-right: 1px solid ButtonHighlight;
width: 0px;
height: 16px;
padding: 0px;
.htmlarea .toolbar .space { width: 5px; }
.htmlarea .toolbar select { font: 11px Tahoma,Verdana,sans-serif; }
.htmlarea .toolbar select,
.htmlarea .toolbar select:hover,
.htmlarea .toolbar select:active { background: FieldFace; color: ButtonText; }
.htmlarea .statusBar {
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
padding: 2px 4px;
background-color: ButtonFace;
color: ButtonText;
font: 11px Tahoma,Verdana,sans-serif;
.htmlarea .statusBar .statusBarTree a {
padding: 2px 5px;
color: #00f;
.htmlarea .statusBar .statusBarTree a:visited { color: #00f; }
.htmlarea .statusBar .statusBarTree a:hover {
background-color: Highlight;
color: HighlightText;
padding: 1px 4px;
border: 1px solid HighlightText;
/* Hidden DIV popup dialogs (PopupDiv) */
.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]
- Ultima version: 2004-01-22 12:50:14
Deletions:
"handler = '".mysql_escape_string($handler)."', ".
"default_handler" => "page",
if (preg_match("/^\[\[(\S*)(\s (. ))?\]\]$/", $thing, $matches))
else if (preg_match("/^[A-Z,ÄÖÜ][A-Z,a-z,ÄÖÜ,ßäöü] [:]([A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)$/s", $thing))
else if (preg_match("/^[A-Z,ÄÖÜ][a-z,ßäöü] [A-Z,0-9,ÄÖÜ][A-Z,a-z,0-9,ÄÖÜ,ßäöü]*$/s", $thing))
"/(\[\[.*?\]\]|\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|".
$output .=
'<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/htmlarea.js"></script>'."\n".
'<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/dialog.js"></script>'."\n".
'<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/popups/en/htmlarea-lang.js"></script>'."\n";
$output .= "<script language=\"JavaScript\">\n".
"<!--\n".
"var editor=new HTMLArea(\"body\");\n".
"editor.config.editorURL = \"{$this->config['base_url']}/htmlarea/\";\n".
"editor.config.imgURL = \"images/\";\n".
"editor.config.popupURL = \"popups/en/\";\n".
"editor.config.bodyDirection = \"ltr\";\n".
'editor.config.toolbar = [[ "formatblock", "space", "bold", "italic", "underline", "separator", "copy", "cut", "paste", "space", "undo", "redo", "separator", "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator", "forecolor", "separator", "inserthorizontalrule", "createlink", "insertimage", "inserttable" ]];'."\n".
"editor.generate();\n".
"//-->\n".
"</script>\n";
if ($this->HasAccess("write")

Revision [16728]

Edited on 2007-05-31 10:42:20 by BjzIuk [Reverted]
Additions:
"handler = '".mysql_escape_string($handler)."', ".
"default_handler" => "page",
if (preg_match("/^\[\[(\S*)(\s (. ))?\]\]$/", $thing, $matches))
else if (preg_match("/^[A-Z,ÄÖÜ][A-Z,a-z,ÄÖÜ,ßäöü] [:]([A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)$/s", $thing))
else if (preg_match("/^[A-Z,ÄÖÜ][a-z,ßäöü] [A-Z,0-9,ÄÖÜ][A-Z,a-z,0-9,ÄÖÜ,ßäöü]*$/s", $thing))
"/(\[\[.*?\]\]|\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|".
$output .=
'<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/htmlarea.js"></script>'."\n".
'<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/dialog.js"></script>'."\n".
'<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/popups/en/htmlarea-lang.js"></script>'."\n";
$output .= "<script language=\"JavaScript\">\n".
"<!--\n".
"var editor=new HTMLArea(\"body\");\n".
"editor.config.editorURL = \"{$this->config['base_url']}/htmlarea/\";\n".
"editor.config.imgURL = \"images/\";\n".
"editor.config.popupURL = \"popups/en/\";\n".
"editor.config.bodyDirection = \"ltr\";\n".
'editor.config.toolbar = [[ "formatblock", "space", "bold", "italic", "underline", "separator", "copy", "cut", "paste", "space", "undo", "redo", "separator", "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator", "forecolor", "separator", "inserthorizontalrule", "createlink", "insertimage", "inserttable" ]];'."\n".
"editor.generate();\n".
"//-->\n".
"</script>\n";
if ($this->HasAccess("write")
Deletions:
+ "handler = '".mysql_escape_string($handler)."', ".
+ "default_handler" => "page",
if (preg_match("/^\[\[(\S*)(\s+(.+))?\]\]$/", $thing, $matches))
else if (preg_match("/^[A-Z,ÄÖÜ][A-Z,a-z,ÄÖÜ,ßäöü]+[:]([A-Z,a-z,0-9,ÄÖÜ,ßäöü]*)$/s", $thing))
else if (preg_match("/^[A-Z,ÄÖÜ][a-z,ßäöü]+[A-Z,0-9,ÄÖÜ][A-Z,a-z,0-9,ÄÖÜ,ßäöü]*$/s", $thing))
"/(\[\[.*?\]\]|\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|".
+ $output .=
+ '<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/htmlarea.js"></script>'."\n".
+ '<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/dialog.js"></script>'."\n".
+ '<script language="JavaScript" src="'.$this->config['base_url'].'/htmlarea/popups/en/htmlarea-lang.js"></script>'."\n";
+
+ $output .= "<script language=\"JavaScript\">\n".
+ "<!--\n".
+ "var editor=new HTMLArea(\"body\");\n".
+ "editor.config.editorURL = \"{$this->config['base_url']}/htmlarea/\";\n".
+ "editor.config.imgURL = \"images/\";\n".
+ "editor.config.popupURL = \"popups/en/\";\n".
+ "editor.config.bodyDirection = \"ltr\";\n".
+ 'editor.config.toolbar = [[ "formatblock", "space", "bold", "italic", "underline", "separator", "copy", "cut", "paste", "space", "undo", "redo", "separator", "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator", "forecolor", "separator", "inserthorizontalrule", "createlink", "insertimage", "inserttable" ]];'."\n".
+ "editor.generate();\n".
+ "//-->\n".
+ "</script>\n";
if ($this->HasAccess("write") && ($this->page["latest"] == "N"))
--- 21,27 ----
! print($this->Format($this->page["body"], "html"));
if ($this->HasAccess("write") && ($this->page["latest"] == "N"))
add 'html' to SavePage call.
insert javascript links to htmlarea.js, dialog.js, and popups/en/htmlarea-lang.js before textarea
insert javascript code to init HtmlArea
change 'wakka' to 'html' in Format call (when formatting body).
4. Install HTMLAREA into your wakka root path
Download htmlarea.tgz
HTMLAREA is an easy JavaScript? WYSIWYG editor created by Interactive Tools
5. Add classes for HTMLAREA in your wakka.css
.htmlarea { background: #fff; }
.htmlarea .toolbar {
cursor: default;
background: #F8F8F8;
padding: 3px;
.htmlarea .toolbar table { font-family: tahoma,verdana,sans-serif; font-size: 11px; }
.htmlarea .toolbar img { border: none; }
.htmlarea .toolbar .label { padding: 0px 3px; }
.htmlarea .toolbar .button {
background: #F8F8F8;
color: ButtonText;
border: 1px solid #F8F8F8;
padding: 1px;
margin: 0px;
.htmlarea .toolbar .buttonHover {
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
.htmlarea .toolbar .buttonActive, .htmlarea .toolbar .buttonPressed {
padding: 2px 0px 0px 2px;
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
.htmlarea .toolbar .buttonPressed {
background: ButtonHighlight;
.htmlarea .toolbar .indicator {
padding: 0px 3px;
overflow: hidden;
width: 20px;
text-align: center;
cursor: default;
border: 1px solid ButtonShadow;
.htmlarea .toolbar .buttonDisabled { background-color: #aaa; }
.htmlarea .toolbar .buttonDisabled img {
filter: alpha(opacity = 25);
-moz-opacity: 25%;
.htmlarea .toolbar .separator {
position: relative;
margin: 3px;
border-left: 1px solid ButtonShadow;
border-right: 1px solid ButtonHighlight;
width: 0px;
height: 16px;
padding: 0px;
.htmlarea .toolbar .space { width: 5px; }
.htmlarea .toolbar select { font: 11px Tahoma,Verdana,sans-serif; }
.htmlarea .toolbar select,
.htmlarea .toolbar select:hover,
.htmlarea .toolbar select:active { background: FieldFace; color: ButtonText; }
.htmlarea .statusBar {
border: 1px solid;
border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
padding: 2px 4px;
background-color: ButtonFace;
color: ButtonText;
font: 11px Tahoma,Verdana,sans-serif;
.htmlarea .statusBar .statusBarTree a {
padding: 2px 5px;
color: #00f;
.htmlarea .statusBar .statusBarTree a:visited { color: #00f; }
.htmlarea .statusBar .statusBarTree a:hover {
background-color: Highlight;
color: HighlightText;
padding: 1px 4px;
border: 1px solid HighlightText;
/* Hidden DIV popup dialogs (PopupDiv) */
.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]
- Ultima version: 2004-01-22 12:50:14

Revision [10782]

Edited on 2005-08-19 18:33:28 by GmBowen [update on htmlarea availability]
Additions:
[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]
- Ultima version: 2004-01-22 12:50:14
Deletions:
Ultima version: 2004-01-22 12:50:14

Revision [83]

The oldest known version of this page was created on 2004-03-14 16:42:56 by JsnX [update on htmlarea availability]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki