data/System/SmartEditContrib.txt
author Colas Nahaboo <colas@nahaboo.net>
Tue, 14 Apr 2009 00:57:49 +0200
changeset 7 39908cff6bb5
child 11 d4ded5771ee4
permissions -rw-r--r--
typos
colas@7
     1
---+!! <nop>Smart Edit Contrib
colas@7
     2
colas@7
     3
Smart Edit is a !JavaScript editor "&agrave; la wikipedia" for Foswiki.
colas@7
     4
colas@7
     5
It takes an alternate approach to the WYSIWYG one, as its goals are
colas@7
     6
   * be useful, even for experienced wiki users
colas@7
     7
   * predictability: What you see is what will be saved
colas@7
     8
   * reliability: use only the standard TEXTAREA of the browsers
colas@7
     9
   * be unobstrusive: as long as you do not use the toolbar, you are still
colas@7
    10
     using the traditional raw wiki editor
colas@7
    11
colas@7
    12
The aim is to assist System.WikiSyntax editing by providing the following features as !JavaScript code:
colas@7
    13
colas@7
    14
   * Foswiki syntax insertion
colas@7
    15
   * Keyboard shortcuts
colas@7
    16
   * Configurable menus
colas@7
    17
   * A dynamic Foswiki link selection
colas@7
    18
   * A search bar
colas@7
    19
colas@7
    20
Smart Edit is a !JavaScript application, working on *Firefox* , *Internet Explorer* and *Mozilla* . The code is clearly sub-optimal, and should be rewritten as it can be too slow on big topics. It is however much faster on firefox, meaning that you will be able to edit comfortably 15k topics with IE and 80k topics on Firefox. However, we use it as our default editor on our intranet.
colas@7
    21
colas@7
    22
*You can see a demo here* : http://twbw-test.luddeni.net/bin/view/Sandbox (<nop>DemoDemo/demo)
colas@7
    23
colas@7
    24
<img src="%ATTACHURLPATH%/screenShotSmartEditor.JPG" alt="screenShotSmartEditor.JPG" width='766' height='67' />
colas@7
    25
colas@7
    26
%TOC%
colas@7
    27
colas@7
    28
---++ Features and user manual
colas@7
    29
---+++ Styles
colas@7
    30
colas@7
    31
*Supported styles* : Bold, Bold Italic, Italic, Formatted, Verbatim, Blockquote, Heading 1 to 6.
colas@7
    32
colas@7
    33
*How does it work ?*
colas@7
    34
colas@7
    35
When you click on the bold button (for example), Smart Edit gets your selection and inserts the bold tags at the right place. This editor doesn't have a context engine so if you click 2 times on the bold button, you will have 2 bold tags.
colas@7
    36
colas@7
    37
<nop>SmartEditContrib aumatically detect blanks and line break to insert tags at the right place.
colas@7
    38
colas@7
    39
---+++ Lists
colas@7
    40
colas@7
    41
*List types* : Normal (bullet) and numered.
colas@7
    42
colas@7
    43
*How does it work ?*
colas@7
    44
colas@7
    45
Basically, it works like styles but a minimal context was developped to help you.
colas@7
    46
colas@7
    47
   * A click on the list button add a list item a the beginning of the current line. You do not need to put the cursor at this place or to select the while line.
colas@7
    48
colas@7
    49
   * You just type * and 1 space, then you type your text and when you type on the "return" key, the list item is automatically created.
colas@7
    50
   * If you are editing a list item and you hit the return key, a new list item will be created with the same indentation in the next line.
colas@7
    51
   * To indent or outdent a list item, you can just hit the "TAB" key of "SHIFT TAB" like in others editors
colas@7
    52
   * SHIFT+RETURN creates a br tag on the next line
colas@7
    53
colas@7
    54
---+++ Links
colas@7
    55
colas@7
    56
   * *External links*
colas@7
    57
      * Smart Edit provides you a simple and intuitive interface to insert a link. You can also watch a preview of the given link.
colas@7
    58
colas@7
    59
   * *Internal links*
colas@7
    60
      * A dynamic interface help you to select and insert a Foswiki link. You just have to select one web in a list, then choose a topic by its name with auto completion assistance.
colas@7
    61
colas@7
    62
---+++ Icons
colas@7
    63
colas@7
    64
*Configuration* via the Foswiki macros SMARTEDITICONSITE, SMARTEDITICONWEB, SMARTEDITICONUSER that take a list of XML values of the ICON graphics and its LABEL like 
colas@7
    65
<br> =&lt;tselement&gt;&lt;tsname&gt; LABEL &lt;/tsname&gt;&lt;tsstring&gt; ICON &lt;/tsstring&gt;&lt;/tselement&gt;=
colas@7
    66
<br> e.g. =&lt;tselement&gt;&lt;tsname&gt; %<nop>ICON{lock}%&lt;/tsname&gt;&lt;tsstring&gt;%&lt;nop&gt;ICON{lock}%&lt;/tsstring&gt;&lt;/tselement&gt;=
colas@7
    67
colas@7
    68
To add more than one element, you just have to copy from =&lt;tselement&gt;= to =&lt;/tselement&gt;= and to complete each one.
colas@7
    69
colas@7
    70
*Warning*: the ICON and LABEL should only use double quotes ", not simple quotes '. The %<nop>ICON{...}% construct uses double quote, as in =&lt;img src="..."&gt;=, you should not use =&lt;img src='...'&gt;= otherwise smartedit wont run and you will stay in raw edit.
colas@7
    71
colas@7
    72
*Use* : Just open the icon chooser with icon button and click on your image to insert it into the text.
colas@7
    73
colas@7
    74
---+++ Insertion
colas@7
    75
colas@7
    76
*Basic insertion* : Smart Edit provides you some basic tags to insert that are =&lt;nop&gt;=, =&lt;br /&gt;= and =&lt;hr /&gt;=. But it is possible to configure personal strings to insert by editing a simple Foswiki macro.
colas@7
    77
colas@7
    78
*Configuration* : via the Foswiki macros SMARTEDITSTRINGSITE,  SMARTEDITSTRINGWEB, SMARTEDITSTRINGUSERS that take a list of XML values of the STRING to insert and its LABEL like 
colas@7
    79
<br> =&lt;tselement&gt;&lt;tsname&gt; LABEL &lt;/tsname&gt;&lt;tsstring&gt; STRING &lt;/tsstring&gt;&lt;/tselement&gt;=
colas@7
    80
<br> e.g. =&lt;tselement&gt;&lt;tsname&gt; Today's Date&lt;/tsname&gt;&lt;tsstring&gt; %<nop>GMTIME{$year-$mo-$day}%&lt;/tsstring&gt;&lt;/tselement&gt;=
colas@7
    81
colas@7
    82
To add more than one element, you just have to copy from =&lt;tselement&gt;= to =&lt;/tselement&gt;= and to complete each one.
colas@7
    83
colas@7
    84
*Warning*: the ICON and LABEL should only use simple quotes ', not double quotes "
colas@7
    85
colas@7
    86
colas@7
    87
---+++ Search
colas@7
    88
colas@7
    89
Smart Edit also provides you a search toolbar. You just have to type your text and you know automatically if the typed text is found into the textarea.
colas@7
    90
colas@7
    91
Info : When you are entering text into the search text box, a click on the "*return*" key automatically selects the first occurence of your text.
colas@7
    92
Textarea size
colas@7
    93
colas@7
    94
Smart Edit gives you the ability to increase or decrease the textarea height with these buttons: . You can also set the textarea size to the exact number of lines in your text by clicking on the "Auto fit" button. 
colas@7
    95
colas@7
    96
---+++ Keyboard shortcuts
colas@7
    97
colas@7
    98
   * *TAB* - Indent the current line (no selection needed)
colas@7
    99
   * *SHIFT+TAB* - Outdent the current line (no selection needed)
colas@7
   100
   * *RETURN*
colas@7
   101
      * If there is a list item into the current line, automatically go to the next line and add a new list item with the same indentation
colas@7
   102
      * If there is a list item into the current line and no text, automatically go to the next line, deleting last empty list item
colas@7
   103
      * If your the text in the current line is indented, go to the next line with the same indentation
colas@7
   104
   * *SHIFT+RETURN*
colas@7
   105
      * Go to the next line, add a br tag with the same indentation 
colas@7
   106
colas@7
   107
---++ Contrib Install new release
colas@7
   108
colas@7
   109
When a new release is available, you just have to download the zip file and to unzip it from your foswiki root directory.
colas@7
   110
colas@7
   111
---++ Contrib Installation Instructions on pattern-based skins
colas@7
   112
   * unzip/untar the plugin at the root level of your foswiki install
colas@7
   113
   * If you use the default pattern skin, just put in your <nop>Main.SitePreferences a
colas@7
   114
<verbatim>
colas@7
   115
      * Set SKIN = smarteditor, pattern
colas@7
   116
</verbatim>
colas@7
   117
   * Note that it should be compatible with other pattern modifications,
colas@7
   118
     e.g. =Set SKIN = smarteditor, editdefault, pattern=
colas@7
   119
   * Add the following declarations to the same <nop>Main.SitePreferences topic. You can expand and/or modify these at will
colas@7
   120
<verbatim>
colas@7
   121
---++ Smartedit
colas@7
   122
Warning: only use simple quotes ', not double quotes " in the following 3 vars:
colas@7
   123
   * Set SMARTEDITSTRINGSITE = <tselement><tsname>Today's Date</tsname><tsstring>%GMTIME{$year-$mo-$day}%</tsstring></tselement><tselement><tsname>User name</tsname><tsstring>%WIKIUSERNAME%</tsstring></tselement><tselement><tsname>Signature</tsname><tsstring>--&nbsp;%WIKIUSERNAME% - %DATE%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added at top</tsname><tsstring>%<nop>COMMENT{type='top'}%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added at end</tsname><tsstring>%<nop>COMMENT{type='bottom'}%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added immediately before</tsname><tsstring>%<nop>COMMENT{type='above'}%</tsstring></tselement><tselement><tsname>Bullet item added immediately before</tsname><tsstring>%<nop>COMMENT{type='bulletabove'}%</tsstring></tselement><tselement><tsname>Wiki thread mode comment, signed and dated</tsname><tsstring>%<nop>COMMENT{type='threadmode'}%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added recurse after comment box</tsname><tsstring>%<nop>COMMENT{type='belowthreadmode'}%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added immediately below</tsname><tsstring>%<nop>COMMENT{type='below'}%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added at top of table below</tsname><tsstring>%<nop>COMMENT{type='tableprepend'}%</tsstring></tselement><tselement><tsname>Comments, signed and dated, added at end of table above</tsname><tsstring>%<nop>COMMENT{type='tableappend'}%</tsstring></tselement><tselement><tsname>Add before the comment box, after the last comment</tsname><tsstring>%<nop>COMMENT{type='after'}%</tsstring></tselement><tselement><tsname>Action of Action Tracker added to action table directly above</tsname><tsstring>%<nop>COMMENT{type='action'}%</tsstring></tselement><tselement><tsname>Tablerows adding on end</tsname><tsstring>%<nop>COMMENT{type='table'}%</tsstring></tselement><tselement><tsname>Talk using TOC adding on end</tsname><tsstring>%<nop>COMMENT{type='toctalk'}%</tsstring></tselement><tselement><tsname>Create a list of annotated bookmarks</tsname><tsstring>%<nop>COMMENT{type='bookmark'}%</tsstring></tselement><tselement><tsname>Post to a different topic and return to here</tsname><tsstring>%<nop>COMMENT{type='return'}%</tsstring></tselement>
colas@7
   124
   * Set SMARTEDITSTRINGWEB = 
colas@7
   125
   * Set SMARTEDITSTRINGUSERS =
colas@7
   126
   
colas@7
   127
Warning: only use double quotes ", not single quotes ' in the following 3 vars:
colas@7
   128
   * Set SMARTEDITICONSITE = <tselement><tsname> %ICON{info}%</tsname><tsstring>%<nop>ICON{info}%</tsstring></tselement><tselement><tsname> %ICON{more}%</tsname><tsstring>%<nop>ICON{more}%</tsstring></tselement><tselement><tsname> %ICON{note}%</tsname><tsstring>%<nop>ICON{note}%</tsstring></tselement><tselement><tsname> %ICON{pencil}%</tsname><tsstring>%<nop>ICON{pencil}%</tsstring></tselement><tselement><tsname> %ICON{question}%</tsname><tsstring>%<nop>ICON{question}%</tsstring></tselement><tselement><tsname> %ICON{stargold}%</tsname><tsstring>%<nop>ICON{stargold}%</tsstring></tselement><tselement><tsname> %ICON{starred}%</tsname><tsstring>%<nop>ICON{starred}%</tsstring></tselement><tselement><tsname> %ICON{stop}%</tsname><tsstring>%<nop>ICON{stop}%</tsstring></tselement><tselement><tsname> %ICON{target}%</tsname><tsstring>%<nop>ICON{target}%</tsstring></tselement><tselement><tsname> %ICON{tip}%</tsname><tsstring>%<nop>ICON{tip}%</tsstring></tselement><tselement><tsname> %ICON{warning}%</tsname><tsstring>%<nop>ICON{warning}%</tsstring></tselement><tselement><tsname> %ICON{wip}%</tsname><tsstring>%<nop>ICON{wip}%</tsstring></tselement><tselement><tsname> %ICON{watch}%</tsname><tsstring>%<nop>ICON{watch}%</tsstring></tselement><tselement><tsname> %ICON{wrench}%</tsname><tsstring>%<nop>ICON{wrench}%</tsstring></tselement><tselement><tsname> %ICON{person}%</tsname><tsstring>%<nop>ICON{person}%</tsstring></tselement><tselement><tsname> %ICON{group}%</tsname><tsstring>%<nop>ICON{group}%</tsstring></tselement><tselement><tsname> %ICON{key}%</tsname><tsstring>%<nop>ICON{key}%</tsstring></tselement><tselement><tsname> %ICON{lock}%</tsname><tsstring>%<nop>ICON{lock}%</tsstring></tselement><tselement><tsname> %ICON{new}%</tsname><tsstring>%<nop>ICON{new}%</tsstring></tselement><tselement><tsname> %ICON{todo}%</tsname><tsstring>%<nop>ICON{todo}%</tsstring></tselement><tselement><tsname> %ICON{updated}%</tsname><tsstring>%<nop>ICON{updated}%</tsstring></tselement><tselement><tsname> %ICON{done}%</tsname><tsstring>%<nop>ICON{done}%</tsstring></tselement><tselement><tsname> %ICON{closed}%</tsname><tsstring>%<nop>ICON{closed}%</tsstring></tselement><tselement><tsname> %ICON{choice-yes}%</tsname><tsstring>%<nop>ICON{choice-yes}%</tsstring></tselement><tselement><tsname> %ICON{choice-no}%</tsname><tsstring>%<nop>ICON{choice-no}%</tsstring></tselement><tselement><tsname> %ICON{choice-cancel}%</tsname><tsstring>%<nop>ICON{choice-cancel}%</tsstring></tselement><tselement><tsname> %ICON{minus}%</tsname><tsstring>%<nop>ICON{minus}%</tsstring></tselement><tselement><tsname> %ICON{plus}%</tsname><tsstring>%<nop>ICON{plus}%</tsstring></tselement><tselement><tsname> %ICON{home}%</tsname><tsstring>%<nop>ICON{home}%</tsstring></tselement><tselement><tsname> %ICON{left}%</tsname><tsstring>%<nop>ICON{left}%</tsstring></tselement><tselement><tsname> %ICON{right}%</tsname><tsstring>%<nop>ICON{right}%</tsstring></tselement><tselement><tsname> %ICON{up}%</tsname><tsstring>%<nop>ICON{up}%</tsstring></tselement><tselement><tsname> %ICON{down}%</tsname><tsstring>%<nop>ICON{down}%</tsstring></tselement>
colas@7
   129
   * Set SMARTEDITICONWEB =
colas@7
   130
   * Set SMARTEDITICONUSER =
colas@7
   131
colas@7
   132
colas@7
   133
</verbatim>
colas@7
   134
colas@7
   135
---++ Adaptation to non-pattern based skins
colas@7
   136
You will have to adapt your skin for it. the principles are detailed in the =README-SmartEditContrib.txt= in the distrib
colas@7
   137
colas@7
   138
---++ Contrib Info
colas@7
   139
colas@7
   140
   * Set SHORTDESCRIPTION = Toolbar to help edit Foswiki content
colas@7
   141
colas@7
   142
|  Add-on Author: | Gael Crova (Special thanks to Colas Nahaboo and Frederic Luddeni for their help and feedback)|
colas@7
   143
|  Add-on Version: | 14 Apr 2009 (v3) |
colas@7
   144
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
colas@7
   145
| 14 Apr 2009: | v3: Version for Foswiki 1.0.4 |
colas@7
   146
| 23 Jan 2008: | v2: Version for TWiki Freetown, 4.2.0 |
colas@7
   147
|  18 Aug 2006: | IE Toolbar width fixed |
colas@7
   148
|  16 Aug 2006: | Tab and SHIFT-TAB events disabled in Opera - Help in a specific topic with the viewprint template |
colas@7
   149
|  16 Aug 2006: | Blanks in external links fixed |
colas@7
   150
|  10 Aug 2006: | solved display bug for insert internal link |
colas@7
   151
|  09 Aug 2006: | solved some bugs on TWiki 4.0.2 |
colas@7
   152
|  09 Aug 2006: | Removed some debug information |
colas@7
   153
|  08 Aug 2006: | HTML Tags corrected |
colas@7
   154
|  08 Aug 2006: | IE display fixed - wiki link bugs fixed |
colas@7
   155
|  07 Aug 2006: | Initial version |
colas@7
   156
|  CPAN Dependencies: | none |
colas@7
   157
|  Other Dependencies: | none |
colas@7
   158
|  Perl Version: | 5.005 |
colas@7
   159
|  License: | GPL |
colas@7
   160
|  Add-on Home: | http://foswiki.org/Extensions/%TOPIC% |
colas@7
   161
|  Feedback: | http://foswiki.org/Extensions/%TOPIC%Dev |
colas@7
   162
colas@7
   163
-- TWiki:Main/GaelCrova - 07 Aug 2006