From a3a85a862d7b623dd2f5d0ceaae823db9ad36821 Mon Sep 17 00:00:00 2001 From: Ralf Becker Date: Thu, 8 Jan 2004 09:03:17 +0000 Subject: [PATCH] import htmlarea 3.0beta eGW code to use it, is in phpgwapi/inc/class.html.inc.php the translations (via eGW standard translation system) are in phpgwapi/inc/htmlarea-lang.php --- phpgwapi/inc/class.html.inc.php | 70 +- phpgwapi/inc/htmlarea-lang.php | 91 + phpgwapi/js/htmlarea/dialog.js | 72 + .../js/htmlarea/example-fully-loaded.html | 137 ++ .../js/htmlarea/example-spell-checker.html | 134 ++ .../js/htmlarea/example-table-operations.html | 116 ++ phpgwapi/js/htmlarea/example.html | 181 ++ phpgwapi/js/htmlarea/htmlarea.css | 180 ++ phpgwapi/js/htmlarea/htmlarea.js | 1629 +++++++++++++++++ phpgwapi/js/htmlarea/images/ed_about.gif | Bin 0 -> 87 bytes .../js/htmlarea/images/ed_align_center.gif | Bin 0 -> 69 bytes .../js/htmlarea/images/ed_align_justify.gif | Bin 0 -> 69 bytes phpgwapi/js/htmlarea/images/ed_align_left.gif | Bin 0 -> 69 bytes .../js/htmlarea/images/ed_align_right.gif | Bin 0 -> 68 bytes phpgwapi/js/htmlarea/images/ed_blank.gif | Bin 0 -> 56 bytes phpgwapi/js/htmlarea/images/ed_charmap.gif | Bin 0 -> 143 bytes phpgwapi/js/htmlarea/images/ed_color_bg.gif | Bin 0 -> 181 bytes phpgwapi/js/htmlarea/images/ed_color_fg.gif | Bin 0 -> 171 bytes phpgwapi/js/htmlarea/images/ed_copy.gif | Bin 0 -> 110 bytes phpgwapi/js/htmlarea/images/ed_custom.gif | Bin 0 -> 67 bytes phpgwapi/js/htmlarea/images/ed_cut.gif | Bin 0 -> 91 bytes phpgwapi/js/htmlarea/images/ed_delete.gif | Bin 0 -> 90 bytes .../js/htmlarea/images/ed_format_bold.gif | Bin 0 -> 74 bytes .../js/htmlarea/images/ed_format_italic.gif | Bin 0 -> 77 bytes .../js/htmlarea/images/ed_format_strike.gif | Bin 0 -> 78 bytes phpgwapi/js/htmlarea/images/ed_format_sub.gif | Bin 0 -> 101 bytes phpgwapi/js/htmlarea/images/ed_format_sup.gif | Bin 0 -> 77 bytes .../htmlarea/images/ed_format_underline.gif | Bin 0 -> 85 bytes phpgwapi/js/htmlarea/images/ed_help.gif | Bin 0 -> 70 bytes phpgwapi/js/htmlarea/images/ed_hr.gif | Bin 0 -> 70 bytes phpgwapi/js/htmlarea/images/ed_html.gif | Bin 0 -> 75 bytes phpgwapi/js/htmlarea/images/ed_image.gif | Bin 0 -> 148 bytes .../js/htmlarea/images/ed_indent_less.gif | Bin 0 -> 87 bytes .../js/htmlarea/images/ed_indent_more.gif | Bin 0 -> 87 bytes phpgwapi/js/htmlarea/images/ed_link.gif | Bin 0 -> 97 bytes .../js/htmlarea/images/ed_list_bullet.gif | Bin 0 -> 80 bytes phpgwapi/js/htmlarea/images/ed_list_num.gif | Bin 0 -> 82 bytes phpgwapi/js/htmlarea/images/ed_paste.gif | Bin 0 -> 164 bytes phpgwapi/js/htmlarea/images/ed_redo.gif | Bin 0 -> 80 bytes .../js/htmlarea/images/ed_show_border.gif | Bin 0 -> 104 bytes phpgwapi/js/htmlarea/images/ed_splitcel.gif | Bin 0 -> 925 bytes phpgwapi/js/htmlarea/images/ed_undo.gif | Bin 0 -> 81 bytes .../htmlarea/images/fullscreen_maximize.gif | Bin 0 -> 97 bytes .../htmlarea/images/fullscreen_minimize.gif | Bin 0 -> 97 bytes phpgwapi/js/htmlarea/images/insert_table.gif | 0 phpgwapi/js/htmlarea/index.html | 190 ++ phpgwapi/js/htmlarea/lang/b5.js | 36 + phpgwapi/js/htmlarea/lang/da.js | 38 + phpgwapi/js/htmlarea/lang/de.js | 53 + phpgwapi/js/htmlarea/lang/en.js | 63 + phpgwapi/js/htmlarea/lang/es.js | 36 + phpgwapi/js/htmlarea/lang/fi.js | 46 + phpgwapi/js/htmlarea/lang/fr.js | 36 + phpgwapi/js/htmlarea/lang/gb.js | 36 + phpgwapi/js/htmlarea/lang/it.js | 36 + phpgwapi/js/htmlarea/lang/ja-euc.js | 37 + phpgwapi/js/htmlarea/lang/ja-jis.js | 37 + phpgwapi/js/htmlarea/lang/ja-sjis.js | 37 + phpgwapi/js/htmlarea/lang/ja-utf8.js | 37 + phpgwapi/js/htmlarea/lang/nb.js | 36 + phpgwapi/js/htmlarea/lang/nl.js | 37 + phpgwapi/js/htmlarea/lang/pl.js | 36 + phpgwapi/js/htmlarea/lang/pt_br.js | 37 + phpgwapi/js/htmlarea/lang/ro.js | 63 + phpgwapi/js/htmlarea/lang/ru.js | 36 + phpgwapi/js/htmlarea/lang/se.js | 38 + phpgwapi/js/htmlarea/lang/vn.js | 38 + phpgwapi/js/htmlarea/license.txt | 13 + .../plugins/SpellChecker/img/spell-check.gif | Bin 0 -> 107 bytes .../htmlarea/plugins/SpellChecker/lang/en.js | 37 + .../htmlarea/plugins/SpellChecker/lang/ro.js | 37 + .../plugins/SpellChecker/readme-tech.html | 115 ++ .../SpellChecker/spell-check-logic.cgi | 155 ++ .../SpellChecker/spell-check-style.css | 10 + .../plugins/SpellChecker/spell-check-ui.html | 119 ++ .../plugins/SpellChecker/spell-check-ui.js | 334 ++++ .../plugins/SpellChecker/spell-checker.js | 72 + .../TableOperations/img/cell-delete.gif | 0 .../TableOperations/img/cell-insert-after.gif | Bin 0 -> 118 bytes .../img/cell-insert-before.gif | 0 .../TableOperations/img/cell-merge.gif | Bin 0 -> 896 bytes .../plugins/TableOperations/img/cell-prop.gif | Bin 0 -> 155 bytes .../TableOperations/img/cell-split.gif | Bin 0 -> 907 bytes .../TableOperations/img/col-delete.gif | Bin 0 -> 100 bytes .../TableOperations/img/col-insert-after.gif | 0 .../TableOperations/img/col-insert-before.gif | Bin 0 -> 110 bytes .../plugins/TableOperations/img/col-split.gif | Bin 0 -> 908 bytes .../TableOperations/img/row-delete.gif | Bin 0 -> 104 bytes .../TableOperations/img/row-insert-above.gif | Bin 0 -> 116 bytes .../TableOperations/img/row-insert-under.gif | Bin 0 -> 115 bytes .../plugins/TableOperations/img/row-prop.gif | Bin 0 -> 149 bytes .../plugins/TableOperations/img/row-split.gif | Bin 0 -> 895 bytes .../TableOperations/img/table-prop.gif | Bin 0 -> 145 bytes .../plugins/TableOperations/lang/en.js | 90 + .../plugins/TableOperations/lang/fi.js | 66 + .../plugins/TableOperations/lang/ro.js | 90 + phpgwapi/js/htmlarea/popupdiv.js | 369 ++++ phpgwapi/js/htmlarea/popups/about.html | 55 + phpgwapi/js/htmlarea/popups/blank.html | 0 phpgwapi/js/htmlarea/popups/custom2.html | 35 + phpgwapi/js/htmlarea/popups/editor_help.html | 16 + phpgwapi/js/htmlarea/popups/fullscreen.html | 162 ++ phpgwapi/js/htmlarea/popups/insert_image.html | 216 +++ phpgwapi/js/htmlarea/popups/insert_table.html | 173 ++ .../js/htmlarea/popups/old-fullscreen.html | 131 ++ .../js/htmlarea/popups/old_insert_image.html | 206 +++ phpgwapi/js/htmlarea/popups/popup.js | 42 + phpgwapi/js/htmlarea/popups/select_color.html | 346 ++++ phpgwapi/js/htmlarea/popupwin.js | 125 ++ phpgwapi/js/htmlarea/reference.html | 522 ++++++ phpgwapi/js/htmlarea/release-notes.html | 82 + phpgwapi/js/htmlarea/test.cgi | 21 + 112 files changed, 7277 insertions(+), 11 deletions(-) create mode 100644 phpgwapi/inc/htmlarea-lang.php create mode 100644 phpgwapi/js/htmlarea/dialog.js create mode 100644 phpgwapi/js/htmlarea/example-fully-loaded.html create mode 100644 phpgwapi/js/htmlarea/example-spell-checker.html create mode 100644 phpgwapi/js/htmlarea/example-table-operations.html create mode 100644 phpgwapi/js/htmlarea/example.html create mode 100644 phpgwapi/js/htmlarea/htmlarea.css create mode 100644 phpgwapi/js/htmlarea/htmlarea.js create mode 100644 phpgwapi/js/htmlarea/images/ed_about.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_align_center.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_align_justify.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_align_left.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_align_right.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_blank.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_charmap.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_color_bg.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_color_fg.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_copy.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_custom.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_cut.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_delete.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_format_bold.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_format_italic.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_format_strike.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_format_sub.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_format_sup.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_format_underline.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_help.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_hr.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_html.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_image.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_indent_less.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_indent_more.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_link.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_list_bullet.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_list_num.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_paste.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_redo.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_show_border.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_splitcel.gif create mode 100644 phpgwapi/js/htmlarea/images/ed_undo.gif create mode 100644 phpgwapi/js/htmlarea/images/fullscreen_maximize.gif create mode 100644 phpgwapi/js/htmlarea/images/fullscreen_minimize.gif create mode 100644 phpgwapi/js/htmlarea/images/insert_table.gif create mode 100644 phpgwapi/js/htmlarea/index.html create mode 100644 phpgwapi/js/htmlarea/lang/b5.js create mode 100644 phpgwapi/js/htmlarea/lang/da.js create mode 100644 phpgwapi/js/htmlarea/lang/de.js create mode 100644 phpgwapi/js/htmlarea/lang/en.js create mode 100644 phpgwapi/js/htmlarea/lang/es.js create mode 100644 phpgwapi/js/htmlarea/lang/fi.js create mode 100644 phpgwapi/js/htmlarea/lang/fr.js create mode 100644 phpgwapi/js/htmlarea/lang/gb.js create mode 100644 phpgwapi/js/htmlarea/lang/it.js create mode 100644 phpgwapi/js/htmlarea/lang/ja-euc.js create mode 100644 phpgwapi/js/htmlarea/lang/ja-jis.js create mode 100644 phpgwapi/js/htmlarea/lang/ja-sjis.js create mode 100644 phpgwapi/js/htmlarea/lang/ja-utf8.js create mode 100644 phpgwapi/js/htmlarea/lang/nb.js create mode 100644 phpgwapi/js/htmlarea/lang/nl.js create mode 100644 phpgwapi/js/htmlarea/lang/pl.js create mode 100644 phpgwapi/js/htmlarea/lang/pt_br.js create mode 100644 phpgwapi/js/htmlarea/lang/ro.js create mode 100644 phpgwapi/js/htmlarea/lang/ru.js create mode 100644 phpgwapi/js/htmlarea/lang/se.js create mode 100644 phpgwapi/js/htmlarea/lang/vn.js create mode 100644 phpgwapi/js/htmlarea/license.txt create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/img/spell-check.gif create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/lang/en.js create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/lang/ro.js create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/readme-tech.html create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/spell-check-logic.cgi create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/spell-check-style.css create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/spell-check-ui.html create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/spell-check-ui.js create mode 100644 phpgwapi/js/htmlarea/plugins/SpellChecker/spell-checker.js create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/cell-delete.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/cell-insert-after.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/cell-insert-before.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/cell-merge.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/cell-prop.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/cell-split.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/col-delete.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/col-insert-after.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/col-insert-before.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/col-split.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/row-delete.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/row-insert-above.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/row-insert-under.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/row-prop.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/row-split.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/img/table-prop.gif create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/lang/en.js create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/lang/fi.js create mode 100644 phpgwapi/js/htmlarea/plugins/TableOperations/lang/ro.js create mode 100644 phpgwapi/js/htmlarea/popupdiv.js create mode 100644 phpgwapi/js/htmlarea/popups/about.html create mode 100644 phpgwapi/js/htmlarea/popups/blank.html create mode 100644 phpgwapi/js/htmlarea/popups/custom2.html create mode 100644 phpgwapi/js/htmlarea/popups/editor_help.html create mode 100644 phpgwapi/js/htmlarea/popups/fullscreen.html create mode 100644 phpgwapi/js/htmlarea/popups/insert_image.html create mode 100644 phpgwapi/js/htmlarea/popups/insert_table.html create mode 100644 phpgwapi/js/htmlarea/popups/old-fullscreen.html create mode 100644 phpgwapi/js/htmlarea/popups/old_insert_image.html create mode 100644 phpgwapi/js/htmlarea/popups/popup.js create mode 100644 phpgwapi/js/htmlarea/popups/select_color.html create mode 100644 phpgwapi/js/htmlarea/popupwin.js create mode 100644 phpgwapi/js/htmlarea/reference.html create mode 100644 phpgwapi/js/htmlarea/release-notes.html create mode 100755 phpgwapi/js/htmlarea/test.cgi diff --git a/phpgwapi/inc/class.html.inc.php b/phpgwapi/inc/class.html.inc.php index e5bf4b17d9..eb29c43dec 100644 --- a/phpgwapi/inc/class.html.inc.php +++ b/phpgwapi/inc/class.html.inc.php @@ -16,6 +16,7 @@ { var $user_agent,$ua_version; // 'mozilla','msie','konqueror' var $prefered_img_title; + var $charset,$phpgwapi_js_url; function html() { @@ -42,6 +43,7 @@ { $this->charset = $GLOBALS['phpgw']->translation->charset(); } + $this->phpgwapi_js_url = $GLOBALS['phpgw_info']['server']['webserver_url'].'/phpgwapi/js'; } function htmlspecialchars($str) @@ -49,15 +51,16 @@ return htmlspecialchars($str,ENT_COMPAT,$this->charset); } - /* - * Function: Allows to show and select one item from an array - * Parameters: $name string with name of the submitted var which holds the key of the selected item form array - * $key key(s) of already selected item(s) from $arr, eg. '1' or '1,2' or array with keys - * $arr array with items to select, eg. $arr = array ( 'y' => 'yes','n' => 'no','m' => 'maybe'); - * $no_lang if !$no_lang send items through lang() - * $options additional options (e.g. 'multiple') - * On submit $XXX is the key of the selected item (XXX is the content of $name) - * Returns: string to set for a template or to echo into html page + /*! + @function select + @abstract allows to show and select one item from an array + @param $name string with name of the submitted var which holds the key of the selected item form array + @param $key key(s) of already selected item(s) from $arr, eg. '1' or '1,2' or array with keys + @param $arr array with items to select, eg. $arr = array ( 'y' => 'yes','n' => 'no','m' => 'maybe'); + @param $no_lang if !$no_lang send items through lang() + @param $options additional options (e.g. 'width') + @param $multiple number of lines for a multiselect, default 0 = no multiselect + @returns string to set for a template or to echo into html page */ function select($name, $key, $arr=0,$no_lang=0,$options='',$multiple=0) { @@ -86,7 +89,7 @@ if("$k" == "$key" || strstr(",$key,",",$k,")) { - $out .= " selected"; + $out .= ' selected="1"'; } $out .= ">" . ($no_lang || $text == '' ? $text : lang($text)) . "\n"; } @@ -125,6 +128,51 @@ return "\n"; } + /*! + @function htmlarea + @syntax htmlarea( $name,$content='',$width=False,$height=False ) + @author ralfbecker + @abstract creates a textarea inputfield for the htmlarea js-widget (returns the necessary html and js) + @param $name string name and id of the input-field + @param $content string of the htmlarea (will be run through htmlspecialchars !!!), default '' + @param $style string inline styles, eg. dimension of textarea element + */ + function htmlarea($name,$content='',$style='width:100%; min-width:500px; height:300px;') + { + if (!is_object($GLOBALS['phpgw']->js)) + { + $GLOBALS['phpgw']->js = CreateObject('phpgwapi.javascript'); + } + if (!strstr($GLOBALS['phpgw_info']['flags']['java_script'],'htmlarea')) + { + $GLOBALS['phpgw']->js->validate_file('htmlarea','htmlarea'); + $GLOBALS['phpgw']->js->validate_file('htmlarea','dialog'); + $lang = $GLOBALS['phpgw_info']['user']['preferences']['common']['lang']; + if ($lang == 'en') // other lang-files are utf-8 only and incomplete (crashes htmlarea as of 3.0beta) + { + $GLOBALS['phpgw']->js->validate_file('htmlarea',"lang/$lang"); + } + else + { + $GLOBALS['phpgw_info']['flags']['java_script'] .= +''."\n"; + } + $GLOBALS['phpgw_info']['flags']['java_script'] .= +' +\n"; + } + $id = str_replace(array('[',']'),array('_',''),$name); // no brakets in the id allowed by js + + $GLOBALS['phpgw']->js->set_onload("HTMLArea.replace('$id',htmlareaConfig);"); + + if (!empty($style)) $style = " style=\"$style\""; + + return "\n"; + } + function input($name,$value='',$type='',$options='' ) { if ($type) @@ -203,7 +251,7 @@ function checkbox($name,$value='') { - return "\n"; + return "\n"; } function form($content,$hidden_vars,$url,$url_vars='',$name='',$options='',$method='POST') diff --git a/phpgwapi/inc/htmlarea-lang.php b/phpgwapi/inc/htmlarea-lang.php new file mode 100644 index 0000000000..adc8b32586 --- /dev/null +++ b/phpgwapi/inc/htmlarea-lang.php @@ -0,0 +1,91 @@ + * +* This file is derived from htmlareas's lang/en.js file * +* -------------------------------------------- * +* This program is free software; you can redistribute it and/or modify it * +* under the terms of the GNU General Public License as published by the * +* Free Software Foundation; either version 2 of the License, or (at your * +* option) any later version. * +\**************************************************************************/ + +/* $Id$ */ + +$GLOBALS['phpgw_info']['flags'] = Array( + 'currentapp' => 'home', // can't be phpgwapi, nor htmlarea (no own directory) + 'noheader' => True, + 'nonavbar' => True, + 'noappheader' => True, + 'noappfooter' => True, + 'nofooter' => True, + 'nocachecontrol' => True // allow cacheing +); + +include('../../header.inc.php'); +$GLOBALS['phpgw']->translation->add_app('htmlarea'); + +// I18N constants + +// LANG: "en", ENCODING: UTF-8 | ISO-8859-1 +// Author: Mihai Bazon, + +// FOR TRANSLATORS: +// +// 1. PLEASE PUT YOUR CONTACT INFO IN THE ABOVE LINE +// (at least a valid email address) +// +// 2. PLEASE TRY TO USE UTF-8 FOR ENCODING; +// (if this is not possible, please include a comment +// that states what encoding is necessary.) +?> +HTMLArea.I18N = { + + // the following should be the filename without .js extension + // it will be used for automatically load plugin language. + lang: "", + + tooltips: { + bold: "", + italic: "", + underline: "", + strikethrough: "", + subscript: "", + superscript: "", + justifyleft: "", + justifycenter: "", + justifyright: "", + justifyfull: "", + insertorderedlist: "", + insertunorderedlist: "", + outdent: "", + indent: "", + forecolor: "", + hilitecolor: "", + inserthorizontalrule: "", + createlink: "", + insertimage: "", + inserttable: "", + htmlmode: "", + popupeditor: "", + about: "", + showhelp: "", + textindicator: "", + undo: "", + redo: "", + cut: "", + copy: "", + paste: "" + }, + + buttons: { + "ok": "", + "cancel": "" + }, + + msg: { + "Path": "", + "TEXT_MODE": "] button to switch back to WYSIWIG.'); ?>" + } +}; diff --git a/phpgwapi/js/htmlarea/dialog.js b/phpgwapi/js/htmlarea/dialog.js new file mode 100644 index 0000000000..87134e7393 --- /dev/null +++ b/phpgwapi/js/htmlarea/dialog.js @@ -0,0 +1,72 @@ +// Though "Dialog" looks like an object, it isn't really an object. Instead +// it's just namespace for protecting global symbols. + +function Dialog(url, action, init) { + if (typeof init == "undefined") { + init = window; // pass this window object by default + } + if (document.all) { // here we hope that Mozilla will never support document.all + var value = + showModalDialog(url, init, +// window.open(url, '_blank', + "resizable: no; help: no; status: no; scroll: no"); + if (action) { + action(value); + } + } else { + return Dialog._geckoOpenModal(url, action, init); + } +}; + +Dialog._parentEvent = function(ev) { + if (Dialog._modal && !Dialog._modal.closed) { + Dialog._modal.focus(); + // we get here in Mozilla only, anyway, so we can safely use + // the DOM version. + ev.preventDefault(); + ev.stopPropagation(); + } +}; + +// should be a function, the return handler of the currently opened dialog. +Dialog._return = null; + +// constant, the currently opened dialog +Dialog._modal = null; + +// the dialog will read it's args from this variable +Dialog._arguments = null; + +Dialog._geckoOpenModal = function(url, action, init) { + var dlg = window.open(url, "ha_dialog", + "toolbar=no,menubar=no,personalbar=no,width=10,height=10," + + "scrollbars=no,resizable=no"); + Dialog._modal = dlg; + Dialog._arguments = init; + + // capture some window's events + function capwin(w) { + w.addEventListener("click", Dialog._parentEvent, true); + w.addEventListener("mousedown", Dialog._parentEvent, true); + w.addEventListener("focus", Dialog._parentEvent, true); + }; + // release the captured events + function relwin(w) { + w.removeEventListener("focus", Dialog._parentEvent, true); + w.removeEventListener("mousedown", Dialog._parentEvent, true); + w.removeEventListener("click", Dialog._parentEvent, true); + }; + capwin(window); + // capture other frames + for (var i = 0; i < window.frames.length; capwin(window.frames[i++])); + // make up a function to be called when the Dialog ends. + Dialog._return = function (val) { + if (val && action) { + action(val); + } + relwin(window); + // capture other frames + for (var i = 0; i < window.frames.length; relwin(window.frames[i++])); + Dialog._modal = null; + }; +}; diff --git a/phpgwapi/js/htmlarea/example-fully-loaded.html b/phpgwapi/js/htmlarea/example-fully-loaded.html new file mode 100644 index 0000000000..ec07422174 --- /dev/null +++ b/phpgwapi/js/htmlarea/example-fully-loaded.html @@ -0,0 +1,137 @@ + + +Example of HTMLArea 3.0 + + + + + + + + + + + + + + + + + + + + + + +

HTMLArea 3.0

+ +

A replacement for TEXTAREA elements. © InteractiveTools.com, 2003.

+ +

Plugins: + TableOperations | + SpellChecker +

+ +
+ + + +

+ + + + + +submit + + + +

+ + + diff --git a/phpgwapi/js/htmlarea/example-spell-checker.html b/phpgwapi/js/htmlarea/example-spell-checker.html new file mode 100644 index 0000000000..bc2becc24b --- /dev/null +++ b/phpgwapi/js/htmlarea/example-spell-checker.html @@ -0,0 +1,134 @@ + + +Example of HTMLArea 3.0 + + + + + + + + + + + + + + + + + + + + + + + +

HTMLArea 3.0

+ +

A replacement for TEXTAREA elements. © InteractiveTools.com, 2003.

+ +

Plugins: + SpellChecker (sponsored by American Bible Society). +

+ +
+ + + +

+ + + + + +submit + + + +

+ + + diff --git a/phpgwapi/js/htmlarea/example-table-operations.html b/phpgwapi/js/htmlarea/example-table-operations.html new file mode 100644 index 0000000000..a99efbcd68 --- /dev/null +++ b/phpgwapi/js/htmlarea/example-table-operations.html @@ -0,0 +1,116 @@ + + +Example of HTMLArea 3.0 + + + + + + + + + + + + + + + + + + + + + + + +

HTMLArea 3.0

+ +

A replacement for TEXTAREA elements. © InteractiveTools.com, 2003.

+ +

Page that demonstrates the additional features of the +TableOperations plugin (sponsored by Zapatec Inc.).

+ +
+ + + +

+ + + + + +submit + + + +

+ + + diff --git a/phpgwapi/js/htmlarea/example.html b/phpgwapi/js/htmlarea/example.html new file mode 100644 index 0000000000..31347b1109 --- /dev/null +++ b/phpgwapi/js/htmlarea/example.html @@ -0,0 +1,181 @@ + + +Example of HTMLArea 3.0 + + + + + + + + + + + + + + + + +

HTMLArea 3.0

+ +

A replacement for TEXTAREA elements. © InteractiveTools.com, 2003.

+ +
+ + + +

+ + + + + +submit + + + +

+ + + diff --git a/phpgwapi/js/htmlarea/htmlarea.css b/phpgwapi/js/htmlarea/htmlarea.css new file mode 100644 index 0000000000..23bdf7d9db --- /dev/null +++ b/phpgwapi/js/htmlarea/htmlarea.css @@ -0,0 +1,180 @@ +.htmlarea { background: #fff; } + +.htmlarea .toolbar { + cursor: default; + background: ButtonFace; + padding: 1px 1px 2px 1px; + border: 1px solid; + border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; +} +.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: ButtonFace; + color: ButtonText; + border: 1px solid ButtonFace; + 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; +} + +form { margin: 0px; border: none; } diff --git a/phpgwapi/js/htmlarea/htmlarea.js b/phpgwapi/js/htmlarea/htmlarea.js new file mode 100644 index 0000000000..0299e5c5ab --- /dev/null +++ b/phpgwapi/js/htmlarea/htmlarea.js @@ -0,0 +1,1629 @@ +// +// htmlArea v3.0 - Copyright (c) 2002 interactivetools.com, inc. +// This copyright notice MUST stay intact for use (see license.txt). +// +// A free WYSIWYG editor replacement for + + + diff --git a/phpgwapi/js/htmlarea/popups/insert_image.html b/phpgwapi/js/htmlarea/popups/insert_image.html new file mode 100644 index 0000000000..55e56a0c0e --- /dev/null +++ b/phpgwapi/js/htmlarea/popups/insert_image.html @@ -0,0 +1,216 @@ + + + + Insert Image + + + + + + + + + + + +
Insert Image
+ +
+ + + + + + + + + + + + + +
Image URL: + +
Alternate text:
+ +

+ +

+Layout + +
+ +
Alignment:
+ + +

+ +

Border thickness:
+ + +
+ +
+ +
+Spacing + +
+ +
Horizontal:
+ + +

+ +

Vertical:
+ + +
+ +
+ +
+
+ + +
+ +
+ + + diff --git a/phpgwapi/js/htmlarea/popups/insert_table.html b/phpgwapi/js/htmlarea/popups/insert_table.html new file mode 100644 index 0000000000..efdf3f0442 --- /dev/null +++ b/phpgwapi/js/htmlarea/popups/insert_table.html @@ -0,0 +1,173 @@ + + + + Insert Table + + + + + + + + + + + +
Insert Table
+ +
+ + + + + + + + + + + + + + + + + + + +
Rows:
Cols:Width:
+ +

+ +

+Layout + +
+ +
Alignment:
+ + +

+ +

Border thickness:
+ + +
+ +
+ +
+Spacing + +
+ +
Cell spacing:
+ + +

+ +

Cell padding:
+ + +
+ +
+ +
+
+ + +
+ +
+ + + diff --git a/phpgwapi/js/htmlarea/popups/old-fullscreen.html b/phpgwapi/js/htmlarea/popups/old-fullscreen.html new file mode 100644 index 0000000000..7c00d916cb --- /dev/null +++ b/phpgwapi/js/htmlarea/popups/old-fullscreen.html @@ -0,0 +1,131 @@ + +Fullscreen Editor + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/phpgwapi/js/htmlarea/popups/old_insert_image.html b/phpgwapi/js/htmlarea/popups/old_insert_image.html new file mode 100644 index 0000000000..613f460131 --- /dev/null +++ b/phpgwapi/js/htmlarea/popups/old_insert_image.html @@ -0,0 +1,206 @@ + + + + + + + +Insert Image + + + + + +
Image URL:
+ + +
Alternate Text:
+ + +
+Layout +
+ +
+Spacing +
+ +
Alignment:
+ + +
Horizontal:
+ + +
Border Thickness:
+ + +
Vertical:
+ + + + + + + \ No newline at end of file diff --git a/phpgwapi/js/htmlarea/popups/popup.js b/phpgwapi/js/htmlarea/popups/popup.js new file mode 100644 index 0000000000..68cbeb2615 --- /dev/null +++ b/phpgwapi/js/htmlarea/popups/popup.js @@ -0,0 +1,42 @@ +function __dlg_onclose() { + if (!document.all) { + opener.Dialog._return(null); + } +}; + +function __dlg_init() { + if (!document.all) { + // init dialogArguments, as IE gets it + window.dialogArguments = opener.Dialog._arguments; + window.sizeToContent(); + window.sizeToContent(); // for reasons beyond understanding, + // only if we call it twice we get the + // correct size. + window.addEventListener("unload", __dlg_onclose, true); + // center on parent + var px1 = opener.screenX; + var px2 = opener.screenX + opener.outerWidth; + var py1 = opener.screenY; + var py2 = opener.screenY + opener.outerHeight; + var x = (px2 - px1 - window.outerWidth) / 2; + var y = (py2 - py1 - window.outerHeight) / 2; + window.moveTo(x, y); + var body = document.body; + window.innerHeight = body.offsetHeight; + window.innerWidth = body.offsetWidth; + } else { + var body = document.body; + window.dialogHeight = body.offsetHeight + 50 + "px"; + window.dialogWidth = body.offsetWidth + "px"; + } +}; + +// closes the dialog and passes the return info upper. +function __dlg_close(val) { + if (document.all) { // IE + window.returnValue = val; + } else { + opener.Dialog._return(val); + } + window.close(); +}; diff --git a/phpgwapi/js/htmlarea/popups/select_color.html b/phpgwapi/js/htmlarea/popups/select_color.html new file mode 100644 index 0000000000..d1fd26b576 --- /dev/null +++ b/phpgwapi/js/htmlarea/popups/select_color.html @@ -0,0 +1,346 @@ + + +Select Color + + + + + + + +
+ + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/phpgwapi/js/htmlarea/popupwin.js b/phpgwapi/js/htmlarea/popupwin.js new file mode 100644 index 0000000000..8d37f254fe --- /dev/null +++ b/phpgwapi/js/htmlarea/popupwin.js @@ -0,0 +1,125 @@ +function PopupWin(editor, title, handler, initFunction) { + this.editor = editor; + this.handler = handler; + var dlg = window.open("", "__ha_dialog", + "toolbar=no,menubar=no,personalbar=no,width=600,height=600," + + "scrollbars=no,resizable=no"); + this.window = dlg; + var doc = dlg.document; + this.doc = doc; + var self = this; + + var base = document.baseURI || document.URL; + if (base && base.match(/(.*)\/([^\/]+)/)) { + base = RegExp.$1 + "/"; + } + this.baseURL = base; + + doc.open(); + var html = "" + title + "\n"; + // html += "\n"; + html += "\n"; + html += ""; + doc.write(html); + doc.close(); + + // sometimes I Hate Mozilla... ;-( + function init2() { + var body = doc.body; + if (!body) { + setTimeout(init2, 25); + return false; + } + dlg.title = title; + doc.documentElement.style.padding = "0px"; + doc.documentElement.style.margin = "0px"; + var content = doc.createElement("div"); + content.className = "content"; + self.content = content; + body.appendChild(content); + self.element = body; + initFunction(self); + dlg.focus(); + }; + init2(); +}; + +PopupWin.prototype.callHandler = function() { + var tags = ["input", "textarea", "select"]; + var params = new Object(); + for (var ti in tags) { + var tag = tags[ti]; + var els = this.content.getElementsByTagName(tag); + for (var j = 0; j < els.length; ++j) { + var el = els[j]; + var val = el.value; + if (el.tagName.toLowerCase() == "input") { + if (el.type == "checkbox") { + val = el.checked; + } + } + params[el.name] = val; + } + } + this.handler(this, params); + return false; +}; + +PopupWin.prototype.close = function() { + this.window.close(); +}; + +PopupWin.prototype.addButtons = function() { + var self = this; + var div = this.doc.createElement("div"); + this.content.appendChild(div); + div.className = "buttons"; + for (var i = 0; i < arguments.length; ++i) { + var btn = arguments[i]; + var button = this.doc.createElement("button"); + div.appendChild(button); + button.innerHTML = HTMLArea.I18N.buttons[btn]; + switch (btn) { + case "ok": + button.onclick = function() { + self.callHandler(); + self.close(); + return false; + }; + break; + case "cancel": + button.onclick = function() { + self.close(); + return false; + }; + break; + } + } +}; + +PopupWin.prototype.showAtElement = function() { + var self = this; + // Mozilla needs some time to realize what's goin' on.. + setTimeout(function() { + var w = self.content.offsetWidth + 4; + var h = self.content.offsetHeight + 4; + // size to content -- that's fuckin' buggy in all fuckin' browsers!!! + // so that we set a larger size for the dialog window and then center + // the element inside... phuck! + + // center... + var el = self.content; + var s = el.style; + // s.width = el.offsetWidth + "px"; + // s.height = el.offsetHeight + "px"; + s.position = "absolute"; + s.left = (w - el.offsetWidth) / 2 + "px"; + s.top = (h - el.offsetHeight) / 2 + "px"; + if (HTMLArea.is_gecko) { + self.window.innerWidth = w; + self.window.innerHeight = h; + } else { + self.window.resizeTo(w + 8, h + 35); + } + }, 25); +}; diff --git a/phpgwapi/js/htmlarea/reference.html b/phpgwapi/js/htmlarea/reference.html new file mode 100644 index 0000000000..81d617f6a3 --- /dev/null +++ b/phpgwapi/js/htmlarea/reference.html @@ -0,0 +1,522 @@ + + +HTMLArea-3.0 Reference + + + + + + + + + + + + +

HTMLArea-3.0 Documentation

+ +
+ + This documentation contains valid information, but is outdated in the + terms that it does not covers all the features of HTMLArea. A new + documentation project will be started, based on LaTeX. + +
+ + +

Introduction

+ +

What is HTMLArea?

+ +

HTMLArea is a free WYSIWYG editor replacement for <textarea> +fields. By adding a few simple lines of JavaScript code to your web page +you can replace a regular textarea with a rich text editor that lets your +users do the following:

+ +
    +
  • Format text to be bold, italicized, or underlined.
    • +
  • Change the face, size, style and color.
    • +
  • Left, center, or right-justify paragraphs.
    • +
  • Make bulleted or numbered lists.
    • +
  • Indent or un-indent paragraphs.
    • +
  • Insert a horizontal line.
    • +
  • Insert hyperlinks and images.
    • +
  • View the raw HTML source of what they're editing.
    • +
  • and much more...
    • +
+ +

Some of the interesting features of HTMLArea that set's it apart from +other web based WYSIWYG editors are as follows:

+ +
    +
  • It's lightweight, fast loading and can transform a regular textarea + into a rich-text editor with a single line of JavaScript.
    • +
  • Generates clean, valid HTML.
    • +
  • It's 100% backwards compatible with older or non-supported browsers + (they get the original textarea field).
    • +
  • It's free and can be incorporated into any free or commercial + program.
    • +
  • It works with any server-side languages (ASP, PHP, Perl, Java, + etc).
    • +
  • It's written in JavaScript and can be easily viewed, modified or + extended.
    • +
  • It remembers entered content when a user navigates away and then hits + "back" in their browser.
    • +
  • Since it replaces existing textareas it doesn't require a lot of code + to add it to your pages (just one line).
    • +
  • Did we mention it was free? ;-)
    • +
+ +

Is it really free? What's the catch?

+ +

Yes! It's really free. You can use it, modify it, distribute it with your +software, or do just about anything you like with it.

+ +

What are the browser requirements?

+ +

HTMLArea requires Internet Explorer >= 5.5 +(Windows only), or Mozilla >= 1.3-Beta on any platform. +Any browser based on Gecko will +also work, provided that Gecko version is at least the one included in +Mozilla-1.3-Beta (for example, Galeon-1.2.8). However, it is backwards +compatible with other browsers. They will get a regular textarea field +instead of a WYSIWYG editor.

+ +

Can I see an example of what it looks like?

+ +

Just make sure you're using one of the browsers mentioned above and see +below.

+ +
+ +
+ +

Where can I find out more info, download the latest version and talk to +other HTMLArea users?

+ +

You can find out more about HTMLArea and download the latest version on +the HTMLArea +homepage and you can talk to other HTMLArea users and post any comments +or suggestions you have in the HTMLArea forum.

+ +

Keyboard shortcuts

+ +

The editor provides the following key combinations:

+ +
    +
  • CTRL-A -- select all
    • +
  • CTRL-B -- bold
    • +
  • CTRL-I -- italic
    • +
  • CTRL-U -- underline
    • +
  • CTRL-S -- strikethrough
    • +
  • CTRL-L -- justify left
    • +
  • CTRL-E -- justify center
    • +
  • CTRL-R -- justify right
    • +
  • CTRL-J -- justify full
    • +
  • CTRL-1 .. CTRL-6 -- headings (<h1> .. <h6>)
    • +
+ +

Installation

+ +

How do I add HTMLArea to my web page?

+ +

It's easy. First you need to upload HTMLArea files to your website. +Just follow these steps.

+ +
    +
  1. Download the latest version from the htmlArea + homepage.
    2. +
  2. Unzip the files onto your local computer (making sure to maintain the + directory structure contained in the zip).
    3. +
  3. Create a new folder on your website called /htmlarea/ (make sure it's + NOT inside the cgi-bin).
    4. +
  4. Transfer all the HTMLArea files from your local computer into the + /htmlarea/ folder on your website.
    5. +
  5. Open the example page /htmlarea/example.html with your browser to make + sure everything works.
    6. +
+ +

Once htmlArea is on your website all you need to do is add some +JavaScript to any pages that you want to add WYSIWYG editors to. Here's how +to do that.

+ +
    + +
  1. Include the "htmlarea.js" script: + 
    <script type="text/javascript" src="/htmlarea/htmlarea.js"></script>
    +
    2. + +
  2. If you are using popup dialogs, i.e. for insert table, insert image, + select color, then you need to include the "dialog.js" file. This is + recommended anyway. + 
    <script type="text/javascript" src="/htmlarea/dialog.js"></script>
    +
    3. + +
  3. Include the corresponding language definition file. Note: + internationalization is available only since version 3.0. Check the files + containing "lang" in the distribution ZIP. If your preferred language is + not there yet and you decide to write it, please consider sending it to + us so that it gets included in the next release. + 
    <script type="text/javascript" src="/htmlarea/lang/en.js"></script>
    + +
  4. Include the stylesheet (be sure to put this inside the HEAD tag): + 
    <style type="text/css">@import url(/htmlarea/htmlarea.css)</style>
    +
    5. + +

  5. If you want to change all your <textarea>-s into + HTMLArea-s then you can use the simplest way to create HTMLArea:

    + 
    <script type="text/javascript" defer="1">
+    HTMLArea.replaceAll();
+</script>
    +

    Note: you can also add the + HTMLArea.replaceAll() code to the onload + event handler for the body element, if you find it more appropriate.

    + +

    A different approach, if you have more than one textarea and only want + to change one of them, is to use HTMLArea.replace("id") -- + pass the id of your textarea. Do not use the + name attribute anymore, it's not a standard solution!

    + +
+ +

I want to change the editor settings, how do I do that?

+ +

While it's true that all you need is one line of JavaScript to create an +htmlArea WYSIWYG editor, you can also specify more config settings in the +code to control how the editor works and looks. Here's an example of some of +the available settings:

+ +
var config = new HTMLArea.Config(); // create a new configuration object
+                                    // having all the default values
+config.width = '90%';
+config.height = '200px';
+
+// the following sets a style for the page body (black text on yellow page)
+// and makes all paragraphs be bold by default
+config.pageStyle =
+  'body { background-color: yellow; color: black; font-family: verdana,sans-serif } ' +
+  'p { font-width: bold; } ';
+
+// the following replaces the textarea with the given id with a new
+// HTMLArea object having the specified configuration
+HTMLArea.replace('id', config);
+ +

Important: It's recommended that you add +custom features and configuration to a separate file. This will ensure you +that when we release a new official version of HTMLArea you'll have no +trouble upgrading it.

+ +

How do I customize the toolbar?

+ +

Using the configuration object introduced above allows you to completely +control what the toolbar contains. Following is an example of a one-line, +customized toolbar, much simpler than the default one:

+ +
var config = new HTMLArea.Config();
+config.toolbar = [
+  ['fontname', 'space',
+   'fontsize', 'space',
+   'formatblock', 'space',
+   'bold', 'italic', 'underline']
+];
+HTMLArea.replace('id', config);
+ +

The toolbar is an Array of Array objects. Each array in the toolbar +defines a new line. The default toolbar looks like this:

+ +
config.toolbar = [
+[ "fontname", "space",
+  "fontsize", "space",
+  "formatblock", "space",
+  "bold", "italic", "underline", "separator",
+  "strikethrough", "subscript", "superscript", "separator",
+  "copy", "cut", "paste", "space", "undo", "redo" ],
+		
+[ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
+  "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator",
+  "forecolor", "hilitecolor", "textindicator", "separator",
+  "inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator",
+  "popupeditor", "separator", "showhelp", "about" ]
+];
+ +

Except three strings, all others in the examples above need to be defined +in the config.btnList object (detailed a bit later in this +document). The three exceptions are: 'space', 'separator' and 'linebreak'. +These three have the following meaning, and need not be present in +btnList:

+ +
    +
  • 'space' -- Inserts a space of 5 pixels (the width is configurable by external + CSS) at the current + position in the toolbar.
    • +
  • 'separator' -- Inserts a small vertical separator, for visually grouping related + buttons.
    • +
  • 'linebreak' -- Starts a new line in the toolbar. Subsequent controls will be + inserted on the new line.
    • +
+ +

Important: It's recommended that you add +custom features and configuration to a separate file. This will ensure you +that when we release a new official version of HTMLArea you'll have no +trouble upgrading it.

+ +

How do I create custom buttons?

+ +

By design, the toolbar is easily extensible. For adding a custom button +one needs to follow two steps.

+ +

1. Register the button in config.btnList.

+ +

For each button in the toolbar, HTMLArea needs to know the following +information:

+
    +
  • a name for it (we call it the ID of the button);
    • +
  • the path to an image to be displayed in the toolbar;
    • +
  • a tooltip for it;
    • +
  • whether the button is enabled or not in text mode;
    • +
  • what to do when the button is clicked;
    • +
+

You need to provide all this information for registering a new button +too. The button ID can be any string identifier and it's used when +defining the toolbar, as you saw above. We recommend starting +it with "my-" so that it won't clash with the standard ID-s (those from +the default toolbar).

+ +

Register button example #1

+ +
// get a default configuration
+var config = new HTMLArea.Config();
+// register the new button using Config.registerButton.
+// parameters:        button ID,   tooltip,          image,           textMode,
+config.registerButton("my-hilite", "Highlight text", "my-hilite.gif", false,
+// function that gets called when the button is clicked
+  function(editor, id) {
+    editor.surroundHTML('<span class="hilite">', '</span>');
+  }
+);
+ +

An alternate way of calling registerButton is exemplified above. Though +the code might be a little bit larger, using this form makes your code more +maintainable. It doesn't even needs comments as it's pretty clear.

+ +

Register button example #2

+ +
var config = new HTMLArea.Config();
+config.registerButton({
+  id        : "my-hilite",
+  tooltip   : "Highlight text",
+  image     : "my-hilite.gif",
+  textMode  : false,
+  action    : function(editor, id) {
+                editor.surroundHTML('<span class="hilite">', '</span>');
+              }
+});
+ +

You might notice that the "action" function receives two parameters: +editor and id. In the examples above we only used the +editor parameter. But it could be helpful for you to understand +both:

+ +
    +
  • editor is a reference to the HTMLArea object. Since our entire + code now has an OOP-like + design, you need to have a reference to + the editor object in order to do things with it. In previous versions of + HTMLArea, in order to identify the object an ID was used -- the ID of the + HTML element. In this version ID-s are no longer necessary.
    • + +
  • id is the button ID. Wondering why is this useful? Well, you + could use the same handler function (presuming that it's not an anonymous + function like in the examples above) for more buttons. You can see an example a bit later in this document.
    • +
+ +

2. Inserting it into the toolbar

+ +

At this step you need to specify where in the toolbar to insert the +button, or just create the whole toolbar again as you saw in the previous +section. You use the button ID, as shown in the examples of customizing the +toolbar in the previous section.

+ +

For the sake of completion, following there are another examples.

+ +

Append your button to the default toolbar

+ +
config.toolbar.push([ "my-hilite" ]);
+ +

Customized toolbar

+ +
config.toolbar = [
+  ['fontname', 'space',
+   'fontsize', 'space',
+   'formatblock', 'space',
+   'separator', 'my-hilite', 'separator', 'space', // here's your button
+   'bold', 'italic', 'underline', 'space']
+];
+ +

Note: in the example above our new button is +between two vertical separators. But this is by no means required. You can +put it wherever you like. Once registered in the btnList (step 1) your custom button behaves just like a default +button.

+ +

Important: It's recommended that you add +custom features and configuration to a separate file. This will ensure you +that when we release a new official version of HTMLArea you'll have no +trouble upgrading it.

+ +

A complete example

+ +

Please note that it is by no means necessary to include the following +code into the htmlarea.js file. On the contrary, it might not work there. +The configuration system is designed such that you can always customize the +editor from outside files, thus keeping the htmlarea.js file +intact. This will make it easy for you to upgrade your HTMLArea when we +release a new official version. OK, I promise it's the last time I said +this. ;)

+ +
// All our custom buttons will call this function when clicked.
+// We use the buttonId parameter to determine what button
+// triggered the call.
+function clickHandler(editor, buttonId) {
+  switch (buttonId) {
+    case "my-toc":
+      editor.insertHTML("<h1>Table Of Contents</h1>");
+      break;
+    case "my-date":
+      editor.insertHTML((new Date()).toString());
+      break;
+    case "my-bold":
+      editor.execCommand("bold");
+      editor.execCommand("italic");
+      break;
+    case "my-hilite":
+      editor.surroundHTML("<span class=\"hilite\">", "</span>");
+      break;
+  }
+};
+
+// Create a new configuration object
+var config = new HTMLArea.Config();
+
+// Register our custom buttons
+config.registerButton("my-toc",  "Insert TOC", "my-toc.gif", false, clickHandler);
+config.registerButton("my-date", "Insert date/time", "my-date.gif", false, clickHandler);
+config.registerButton("my-bold", "Toggle bold/italic", "my-bold.gif", false, clickHandler);
+config.registerButton("my-hilite", "Hilite selection", "my-hilite.gif", false, clickHandler);
+
+// Append the buttons to the default toolbar
+config.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite"]);
+
+// Replace an existing textarea with an HTMLArea object having the above config.
+HTMLArea.replace("textAreaID", config);
+ + +
+
© InteractiveTools.com 2002, 2003. +
+HTMLArea v3.0 developed by Mihai Bazon for +InteractiveTools.com. +
+Documentation written by Mihai Bazon. +
+ +Last modified on Sun Aug 3 16:11:23 2003 + + + diff --git a/phpgwapi/js/htmlarea/release-notes.html b/phpgwapi/js/htmlarea/release-notes.html new file mode 100644 index 0000000000..f37d40a160 --- /dev/null +++ b/phpgwapi/js/htmlarea/release-notes.html @@ -0,0 +1,82 @@ + + + + HTMLArea-3.0-beta release notes + + + + +

HTMLArea-3.0-beta release notes

+ +

This release was compiled on Aug 11, 2003 [21:30] GMT.

+ + +

Changes since 3.0-Alpha:

+ +
    + +
  • Performance improvements.
    • + +
  • Many bugs fixed.
    • + +
  • Plugin infrastructure.
    • + +
  • TableOperations plugin.
    • + +
  • SpellChecker plugin.
    • + +
  • Status bar.
    • + +
  • API for registering custom buttons and drop-down boxes in the + toolbar.
    • + +
  • Toolbar can contain text labels.
    • + +
  • Cut, copy, paste, undo, redo buttons.
    • + +
+ +

Rationale for Beta

+ +

Why was this released as "Beta"? The code is quite stable and it + didn't deserve a "Beta" qualification. However, there are some things + left to do for the real 3.0 version. These things will not affect the + API to work with HTMLArea, in other words, you can install the Beta + right now and then install the final release without modifying your + code. That's if you don't modify HTMLArea itself. ;-)

+ +

To-Do before 3.0 final

+ +
    + +
  1. We should use a single popup interface. Currently there are two: + dialog.js and popupwin.js; dialog.js emulates modal dialogs, which + sucks when you want to open "select-color" from another popup and not + from the editor itself. Very buggy in IE. We should probably use only + modeless dialogs (that is, popupwin.js).
    2. + +
  2. Internationalization for the SpellChecker plugin.
    3. + +
  3. Internationalization for the TableOperations plugin.
    4. + +
  4. People who sent translations are invited to re-iterate through + their work and make it up-to-date with lang/en.js which is the main + lang file for HTMLArea-3.0. Some things have changed but not all + translations are updated.
    5. + +
  5. Documentation.
    6. + +
+ + +
+
Mihai Bazon
+ + +Last modified on Sun Aug 10 19:31:39 2003 + + + + + + diff --git a/phpgwapi/js/htmlarea/test.cgi b/phpgwapi/js/htmlarea/test.cgi new file mode 100755 index 0000000000..9610ebcb4b --- /dev/null +++ b/phpgwapi/js/htmlarea/test.cgi @@ -0,0 +1,21 @@ +#! /usr/bin/perl -w +# +# +# + + + +use CGI; + +print "Content-type: text/html\n\n"; +$c = new CGI; +$ta = $c->param('ta'); + +print < + + +$ta + + +EOF