.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ======================== EXT: PMK Textarea Widget ======================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed: 2008-04-05T12:20:54 :Author: Peter Klein :Email: peter@umloud.dk :Info 3: :Info 4: .. _EXT-PMK-Textarea-Widget: EXT: PMK Textarea Widget ======================== Extension Key: **pmktextarea** Copyright 2006-2008, Peter Klein, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: PMK Textarea Widget 1** **Introduction 1** What does it do? 1 Screenshots 2 **Users manual 2** Keyboard commands: 2 Button commands: 3 **Administration 3** **Using PMK Textarea in your own extensions 3** Enabling PMK Textarea in your own Backend extensions 3 Overriding the default settings in your own Backend extensions 3 Enabling PMK Textarea in your own Frontend extensions 3 Reference (JavaScript) 4 **Extra Stuff 6** **Known problems 6** **To-Do list 6** **Changelog 6** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ Adds resizing, scrolling line numbers, improved Tab keyhandling and other neat features to standard textareas.Can be used in both Backend and Frontend. (TYPO3 independent as it's written 100% in Javascript) - Textarea can be resized in both horizontal and vertical directions. (All browsers)Min. & Max. sizes can be set for both horizontal and vertical. - Automatic line numbering(IE and Mozilla)Line numbercolumn can be toggled on off either by checkbox or by pressing the Ctrl-L key combination. - Tab charscan be inserted in textareas. (All browsers)Both regular Tab char and spaces can be used as tab char.Can either be inserted as single character, or indent blocks of text.De-indenting is also available by pressing Shift-Tab or Ctrl-Tab - Textarea remembers the tab/indent position when pressingreturn. (All browsers) - Ability to change font sizes(IE, Mozilla and Opera) either by buttons or by pressing the Ctrl+ or Ctrl- key combinationon the numeric keyboard. - Jump to line function (IE and Mozilla) press Jump buttonor key combinationCtrl-G to bring up jump prompt. - Search function (IE and Mozilla) Opera has same function as default.Press Find buttonor key combinationCtrl-F to bring up search prompt.Pressing the F3 key after the initial search will find the next occurrences of search string. - Comments can be toggled on/off by pressing the Ctrl/ or Ctrl\* key combinationon the numeric keyboard. (All browsers) .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-1| .. _Users-manual: Users manual ------------ .. _Keyboard-commands: Keyboard commands: ^^^^^^^^^^^^^^^^^^ - **Ctrl +** (on numeric keyboard) increases the font sizein the textarea (Mozilla & IE only). - **Ctrl -** (on numeric keyboard) decreases the font sizein the textarea (Mozilla & IE only). - **Ctrl /** (on numeric keyboard) toggles “//” type of comments on each selected line. - **Ctrl \*** (on numeric keyboard) toggles “/\* \*/” type of comments on the selected line/block. - **Ctrl L** togglesthe line numbercolumn on/off (Mozilla & IE only). - **Ctrl G** brings up the “Goto line” requester (Mozilla & IE only). - **Ctrl F** brings up the “Search” requester (Mozilla & IE only).Pressing the **F3** key after the initial search will find the next occurrences of search string. - Pressing the **Tab key** , will insert a tab character. If a block of text is selected, the entire block will be indented.Pressing **Shift (or Ctrl)** **Tab key** will de-indentthe selected block. - Pressing the **Enter/Return key** on an indented line, will retain the indention on the next line. .. _Button-commands: Button commands: ^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _img-2: |img-2| """"""" .. container:: table-row a |img-2| b Toggles wrapping in textarea on/off. Note: When wrapping is turned on, the linenumber column will be turned off! .. _img-3: |img-3| """"""" .. container:: table-row a |img-3| b Togglesthe line numbercolumn on/off (Mozilla & IE only). .. _img-4: |img-4| """"""" .. container:: table-row a |img-4| b Brings up the “Search” requester (Mozilla & IE only).Pressing the **F3** key after the initial search will find the next occurrences of search string. .. _img-5: |img-5| """"""" .. container:: table-row a |img-5| b Brings up the “Goto line” requester (Mozilla & IE only). .. _img-6: |img-6| """"""" .. container:: table-row a |img-6| b Increases the font sizein the textarea (Mozilla, IE & Opera only). .. _img-7: |img-7| """"""" .. container:: table-row a |img-7| b Decreases the font sizein the textarea (Mozilla, IE & Opera only). .. _img-8: |img-8| """"""" .. container:: table-row a |img-8| b Minimize textarea. .. _img-9: |img-9| """"""" .. container:: table-row a |img-9| b Maximize textarea. .. ###### END~OF~TABLE ###### .. _Administration: Administration -------------- - All configuration settings can be set/changed using the Extension Manager. - Just click on the extension name, when viewing the installed extensions. - The extension can be turned on/off at user level. To turn it of , just add this line to the TSConfig of a BE user, and the extension will be disabled for that user. :: setup.override.disablePMKTextarea=1 |img-10| Remember to clear the cache after adding the TSConfig setting! .. _Using-PMK-Textarea-in-your-own-extensions: Using PMK Textarea in your own extensions ----------------------------------------- The PMK Textarea extension can be used in your own Backend & Frontend extensions too. .. _Enabling-PMK-Textarea-in-your-own-Backend-extensions: Enabling PMK Textarea in your own Backend extensions ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ All you have to do is setting **class="enable-tab"** on the textarea! .. _Overriding-the-default-settings-in-your-own-Backend-extensions: Overriding the default settings in your own Backend extensions ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ All you have to do is setting **class="enable-tab"** on the textarea!, and in your BE module, add your own settings to **"$this->doc->JScode"** . .. _Enabling-PMK-Textarea-in-your-own-Frontend-extensions: Enabling PMK Textarea in your own Frontend extensions ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ All you have to do is setting **class="enable-tab"** on the textarea! Load the Javascript on the page and set your own settings if needed. (See Reference/Example section.) .. _Reference-JavaScript: Reference (JavaScript) ^^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _linenumState: linenumState """""""""""" .. container:: table-row Property linenumState Data type boolean Description Line numbercolumn turned ON at start? Default 1 .. _wrapState: wrapState """"""""" .. container:: table-row Property wrapState Data type boolean Description Textarea wrap turned OFF at start? Default 1 .. _showButtons: showButtons """"""""""" .. container:: table-row Property showButtons Data type boolean Description Show buttons? Default 1 .. _showMinMaxButton: showMinMaxButton """""""""""""""" .. container:: table-row Property showMinMaxButton Data type boolean Description Show minimize/maximize button? Default 1 .. _showWrapButton: showWrapButton """""""""""""" .. container:: table-row Property showWrapButton Data type boolean Description Show wrap togglebutton? Default 1 .. _showLinenumButton: showLinenumButton """"""""""""""""" .. container:: table-row Property showLinenumButton Data type boolean Description Show line number column togglebutton? Default 1 .. _showFindButton: showFindButton """""""""""""" .. container:: table-row Property showFindButton Data type boolean Description Show find button? Default 1 .. _showJumpButton: showJumpButton """""""""""""" .. container:: table-row Property showJumpButton Data type boolean Description Show jump button? Default 1 .. _showFontButtons: showFontButtons """"""""""""""" .. container:: table-row Property showFontButtons Data type boolean Description Show font sizebuttons? Default 1 .. _typo3Colors: typo3Colors """"""""""" .. container:: table-row Property typo3Colors Data type boolean Description Setting this option to true, will override the colorsettings defined in the extension, with the TYPO3 CSS classes "bgColor3" & "bgColor4" Default 0 .. _linenumColWidth: linenumColWidth """"""""""""""" .. container:: table-row Property linenumColWidth Data type int[45-70] Description Width of line numbercolumn: (in px) Default 47 .. _defaultFontSize: defaultFontSize """"""""""""""" .. container:: table-row Property defaultFontSize Data type int[8-12] Description Font sizein textarea at startup? (in pt) Default 9 .. _defaultHeight: defaultHeight """"""""""""" .. container:: table-row Property defaultHeight Data type int Description Default Height of textarea: Normally the script adapts to the height of the original textarea, but setting this value will override this. Default .. _defaultWidth: defaultWidth """""""""""" .. container:: table-row Property defaultWidth Data type int Description Default Width of textarea: Normally the script adapts to the width of the original textarea, but setting this value will override this. Default .. _minHeight: minHeight """"""""" .. container:: table-row Property minHeight Data type int Description Minimum height of textarea: The user will not be able to resize the textarea height to a size smaller than this. Default .. _maxHeight: maxHeight """"""""" .. container:: table-row Property maxHeight Data type int Description Maximum height of textarea: The user will not be able to resize the textarea height to a size greater than this. Default .. _minWidth: minWidth """""""" .. container:: table-row Property minWidth Data type int Description Minimum width of textarea: The user will not be able to resize the textarea width to a size smaller than this. Default .. _maxWidth: maxWidth """""""" .. container:: table-row Property maxWidth Data type int Description Maximum width of textarea: The user will not be able to resize the textarea width to a size greater than this. Default .. _lockH: lockH """"" .. container:: table-row Property lockH Data type boolean Description Lock height? No resizing of the height is possible. Default 0 .. _lockW: lockW """"" .. container:: table-row Property lockW Data type boolean Description Lock width? No resizing of the width is possible. Default 0 .. _backColor: backColor """"""""" .. container:: table-row Property backColor Data type color Description Background color of tool bar& resize bar Default ButtonFace .. _borderColor: borderColor """"""""""" .. container:: table-row Property borderColor Data type color Description Border color of textarea, tool bar& resize bar Default Gray .. _backColorLn: backColorLn """"""""""" .. container:: table-row Property backColorLn Data type color Description Background color of line numbercolumn Default #F0F0F0 .. _borderColorLn: borderColorLn """"""""""""" .. container:: table-row Property borderColorLn Data type color Description Border color of line numbercolumn Default GrayText .. _textColorLn: textColorLn """"""""""" .. container:: table-row Property textColorLn Data type color Description Color of text in line numbercolumn Default Gray .. _buttonPath: buttonPath """""""""" .. container:: table-row Property buttonPath Data type string Description Alternate path to button images: (Full path including http://) Default .. _tabChar: tabChar """"""" .. container:: table-row Property tabChar Data type Description Char(s) to insert when Tabkey is pressed. Note: This only applies when inserting/indenting. De-indenting only works with one character! Available values: tabshar, 1, 2, 3, 4 When using numeric values (1-4) it will insert that number of spaces instead of the regular tabchar. Default Tabchar .. _languageKey: languageKey """"""""""" .. container:: table-row Property languageKey Data type string Description Language keyfor selecting the language used for Alt tags, Title tagsand requesters. Danish = dk, German = de. etc. (English = default) Default default .. ###### END~OF~TABLE ###### .. _generated: ((generated)) """"""""""""" .. _Examples: Examples ~~~~~~~~ Here's an example on how to override the default settings before the textarea script is applied. The settings is defined in a Javascript Object, like this: :: # Adding the javascript to the pageheader. page.headerData.1001 = TEXT page.headerData.1001.value = In the above example the width has been locked at 470px, so only the height can be resized. .. _Extra-Stuff: Extra Stuff ----------- A special version of Mads Brunn's “Quixplorer” extension , which has been modified to work with pmktextarea can be downloaded from `http://peterklein.phi.t3c.dk/index.php?id=101 `_ .. _Known-problems: Known problems -------------- - When indenting/de-indentingblocks of text in IE, you MUST NOT select the "invisible" char at the end of the LAST line.If you do, the next line will be appended to the selection. Unfortunatelyit's not possible to check if the "invisible" char is present or not (IE sux!), so that bug can never be fixed. :( - Opera doesn't support the "scrollTop" property, which is used to synchronize the line numberswith the textarea. So it's not possible to add line numbersupport for Opera at present time. - Opera has no way of canceling the system events, like the original Tab keyfunction. That's why there's an annoyingflicker when using the indent/deindent functions. - In Mozilla it's possible to drag the buttons into the textarea. - The line numbersdoesn't get updated after cut/paste in IE until you press a key. (Im working on a fix for this.) - In IE (no surprise!), the Minimize/Maximize button moves a couple pixels to the right after hovering over one of the buttons! - The extension XCLASS'es template.php in order to replace the standard tab javascript with the pmk-textarea.js.And due to a bug in template.php ($BE\_USER should be a GLOBAL var, but it isn't!), I had to copy the entire function. This might conflicts with other extensions which also XCLASS'es template.php. If anyone knows of a better way to do this (without XCLASS), please let me know. .. _To-Do-list: To-Do list ---------- - Add configuration option to enable/disable separatefunctions of the script.Status: Partly done. (Right now it's not possible to configure each textarea on a page separately.) - Convert all standard requesters (alert, prompt, confirm) into DHTML pop ups. - Fix scrolling problems with Konquerer/Safari if possible, otherwise most functions will have to be disabled, like in Opera. - Fix the IE oncut/onpaste problems. .. _Changelog: Changelog --------- - 0.1.0 First Public release! - 0.1.1 Added fix for for the new TYPO3 skin “t3skin”.“t3skin” has a bug, where it adds 2 CLASS definitions to textarea tags, which prevents this script from runningcorrectly, as it uses the className defined in the 2 :sup:`nd` CLASS definition, which is ignored. Now it also checks forthe className that “t3skin” adds. - Thanks to Kurt Dirnbauer for reporting this bug. - 0.1.2 Added a couple new configoptions: “lockH”, “lockW” & “tabChar”.“lockH” & “lockW” can be used to lock recizing of either Height or Width. “tabChar” is used to choose what toinsert (either the normal Tabchar or X spaces), when the Tabkey is pressed. - 0.2.0 Mootools Compability Fix. Now works correctly on sites using the Mootools Javascript Framework. - 0.3.0 Now compatible with TYPO3 v4.2+.The Javascript has been updated so that the linenumber scrolling works in Mozilla again. (Mozilla have removedthe mutation event I relied on, in the newver versions of Firefox/Moz so I had to use a crappy method instead.But at least the numbering scrolls again.) Special thanks to Stefan Galinski for extensive betatesting and German language translation. |img-11| EXT: PMK Textarea Widget - 6 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 589 .. :id: Graphic4 .. :name: Graphic4 .. :width: 512 .. |img-2| image:: img-2.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic2 .. :name: Graphic2 .. :width: 16 .. |img-3| image:: img-3.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic3 .. :name: Graphic3 .. :width: 16 .. |img-4| image:: img-4.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic5 .. :name: Graphic5 .. :width: 16 .. |img-5| image:: img-5.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic6 .. :name: Graphic6 .. :width: 16 .. |img-6| image:: img-6.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic8 .. :name: Graphic8 .. :width: 16 .. |img-7| image:: img-7.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic7 .. :name: Graphic7 .. :width: 16 .. |img-8| image:: img-8.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic9 .. :name: Graphic9 .. :width: 16 .. |img-9| image:: img-9.png .. :align: left .. :border: 1 .. :height: 16 .. :id: Graphic10 .. :name: Graphic10 .. :width: 16 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 132 .. :id: Grafik1 .. :name: Grafik1 .. :width: 514 .. |img-11| image:: img-11.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102