(r1)SmartEditAddOn < TWiki

View topic | ~~Edit~~ | ~~WYSIWYGAttach~~Printable

r5 - 18 Aug 2006 - 10:46:53 - GaelCrova^?You are here: Proyecto META >

TWiki Web > SmartEditAddOn

---+!! <nop>SmartEditor Add-On

Smart Edit is a javascript editor "&agrave; la wikipedia" for TWiki.

It takes an alternate approach to the WYSIWYG one, as its goals are
   * be useful, even for experienced wiki users
   * predictability: What you see is what will be saved
   * reliability: use only the standard TEXTAREA of the browsers
   * be unobstrusive: as long as you do not use the toolbar, you are still using the traditional twiki editor

The aim is to assist "TWiki syntax" edition by providing the following features as javascript code:

   * TWiki syntax insertion
   * Keyboard shortcuts
   * Configurable menus
   * A dynamic TWiki link selection
   * A search bar

Smart Editor is a javascript application, working on *Firefox* , *Internet Explorer* and *Mozilla* .

*You can see a demo here* : http://twbw-test.luddeni.net/bin/view/Sandbox (<nop>DemoDemo/demo)

<img src="%ATTACHURLPATH%/screenShotSmartEditor.JPG" alt="screenShotSmartEditor.JPG" width='766' height='67' />

%TOC%

---++ Features and user manual
---+++ Styles

*Supported styles* : Bold, Bold Italic, Italic, Formatted, Verbatim, Blockquote, Heading 1 to 6.

*How does it work ?*

When you click on the bold button (for example), Smart Editor get your selection and insert 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.

<nop>SmartEditAddOn aumatically detect blanks and line break to insert tags at the right place.

---+++ Lists

*List types* : Normal (bullet) and numered.

*How does it work ?*

Basically, it works like styles but a minimal context was developped to help you.

   * 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.

   * 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.
   * 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.
   * To indent or outdent a list item, you can just hit the "TAB" key of "SHIFT TAB" like in others editors
   * SHIFT+RETURN creates a br tag on the next line

---+++ Links

   * *External links*
      * Smart Editor provides you a simple and intuitive interface to insert a link. You can also watch a preview of the given link.

   * *Internal links*
      * A dynamic interface help you to select and insert a TWiki link. You just have to select one web in a list, then choose a topic by its name with auto completion assistance.

---+++ Icons

*Configuration* ( _TWiki Administrator only_ ): You just have to edit the TWiki variable SMARTEDITICONS in your TWiki preferences. If this variable doesn't exist, you just have to add it and to set your icons.

*Use* : Just open the icon chooser with icon button and click on your image to insert it into the text.

---+++ Insertion

*Basic insertion* : Smart Editor 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 TWiki variable.

*Configuration* :

   * if you are a TWiki administrator, you can edit the "SMARTEDITSTRINGSITE" TWiki variable into TWiki preferences or "SMARTEDITSTRINGWEB" into a specific web.
   * If you just want to add some personal strings, you just have to add the SMARTEDITSTRINGUSERS variable on your personal page and to specify your string like it follows :

Example :

<verbatim>
Set SMARTEDITSTRINGUSERS = <tselement><tsname>Your menu name </tsname><tsstring>you string to insert </tsstring></tselement>
</verbatim>

To add more than one element, you just have to copy from =&lt;tselement&gt;= to =&lt;/tselement&gt;= and to complete each one.

---+++ Search

Smart Editor 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.

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.
Textarea size

Smart Editor 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. 

---+++ Keyboard shortcuts

   * *TAB* - Indent the current line (no selection needed)
   * *SHIFT+TAB* - Outdent the current line (no selection needed)
   * *RETURN*
      * 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
      * If there is a list item into the current line and no text, automatically go to the next line, deleting last empty list item
      * If your the text in the current line is indented, go to the next line with the same indentation
   * *SHIFT+RETURN*
      * Go to the next line, add a br tag with the same indentation 

---+++ Configure "icon" and "insert string" menus

These manipulations automatically set the content of menus into the <nop>SmartEditAddOn toolbar.
If the syntax is not respected, the content of the variable will not be loaded.

---++++ The insert Menu

From <nop>TWikiPreferences (<nop>TWiki administrator), add or edit this variable like it follows:

<verbatim>
   * Set SMARTEDITSTRINGSITE = <tselement><tsname>Table of content</tsname><tsstring>%<nop>TOC%</tsstring></tselement><tselement><tsname>your menu name</tsname><tsstring>your string</tsstring></tselement>...
</verbatim>

From <nop>Web Preferences (<nop>TWiki administrator), add or edit this variable like it follows:

<verbatim>
   * Set SMARTEDITSTRINGWEB  =   <tselement><tsname>Current web</tsname><tsstring>%<nop>WEB%</tsstring></tselement></tselement><tselement><tsname>your menu name</tsname><tsstring>your string</tsstring></tselement>...
</verbatim>

From user preferences, every one can add or edit this variable in his personnal page <nop>Main.FirstnameLastname: 

<verbatim>
      * Set SMARTEDITSTRINGUSERS =  <tselement><tsname>My email</tsname><tsstring>toto@toto.com</tsstring></tselement></tselement><tselement><tsname>your menu name</tsname><tsstring>your string</tsstring></tselement>...
</verbatim>

---++++ Icons (<nop>TWiki administrator)

From <nop>TWikiPreferences, add or edit this variable like it follows: (not category in this first release)

<verbatim>
   * Set SMARTEDITICONS = %ICON{bubble}% %ICON{days}% %ICON{download}%...
</verbatim>

---++ Add-On Install new release

When a new release is available, you just have to download the zip file and to unzip it from your twiki root directory.

---++ Add-On Installation Instructions (15 min)

---+++ Template edition

---++++ In *edit.pattern.tmpl* , you have to add following lines

Or you edit edit theses files following these intructions

   * JS and CSS files declaration into your template (edit.pattern.tmpl):

After 

<verbatim>
%TMPL:DEF{"templatejavascript"}%
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/TWikiJavascripts/twiki_edit.js"></script>
</verbatim>

Add

<verbatim>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/mochikit/lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/twikismartEngine.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/twikismartActions.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/smartEditUI.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/twikismartEvents.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/smartEditAutoCompletion.js"></script>
<script type="text/javascript" src="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/smartEditDynamicDivision.js"></script>
<link rel="stylesheet" type="text/css" href="%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/twikismartstyle.css"/>
...
</verbatim>

   * Add this lines just before the form containing the textarea

<verbatim>
...
<div id="smartEditorTopToolbarID"></div>

Before these lines

<form name="main" action="%SCRIPTURLPATH{"save"}%/%WEB%/%TOPIC%" method="post">
<textarea class="twikiEditboxStyleProportional" id="topic" name="text" rows="%EDITBOXHEIGHT%" cols="%EDITBOXWIDTH%" style='%EDITBOXSTYLE%' onkeydown='handleKeyDown(event)'>%TEXT%</textarea>
</verbatim>

   * At the end (last line) of this file, copy paste these lines

<verbatim>
<script type="text/javascript">
// The script URL - with / at the end
twikismartScriptURL = '%PUBURLPATH%/%TWIKIWEB%/SmartEditAddOn/';   
twikismartWikiHomeURL = '%WIKIHOMEURL%/'; 
twikismartWikiSkin = '%SKIN%';
// Load all specific preferences
twikismartSitePreferences = ""+"%SMARTEDITSTRINGSITE%";
twikismartWebPreferences = ""+"%SMARTEDITSTRINGWEB%";
twikismartCustomerPreferences = ""+"%SMARTEDITSTRINGUSERS%";
twikismartCurrentWeb = "%WEB%";
twikismartTWikiIcons = '%SMARTEDITICONS%';
// To know the id of the textarea ... if it is not 'topic'
twikismartEdit('topic');
</script>
</verbatim>

---++++ In your "view" template *view.pattern.tmpl* , add these lines

<verbatim>
Just after
%TMPL:P{"content"}%
copy this line :
<link rel="stylesheet" type="text/css" href="%PUBURLPATH%/%TWIKIWEB%/TWikiSmartEdit/css/twikismartstyle.css"/>
</verbatim>

__Note:__ You do not need to install anything on the browser to use this add-on. The following instructions are for the administrator who installs the add-on on the server where TWiki is running. 

---+++ Files to copy

   * Download the ZIP file from the Add-on Home (see below)
   * Unzip ==%TOPIC%.zip== in your twiki installation directory. Content:
     | *File:* | *Description:* |
     | ==data/TWiki/%TOPIC%.txt== | Add-on topic |
     | ==pub/TWiki/SmartEditAddOn== | Add-on script and files |
     | ==pub/TWiki/SmartEditAddOn/mochikit== | Mochikit javascript library |
     | ==templates/== | Templates for Smart Editor |
     
   * Test if the installation was successful:
      * Just edit you page and you will see a new toolbar like that :%BR%
        <img src="%ATTACHURLPATH%/screenShotSmartEditor.JPG" alt="screenShotSmartEditor.JPG" width='766' height='67' />
      * Or go to this page : SmartEditAddOn

---++ Configuration of "Insert standard string" and icons menus

---+++ In your TWiki preferences

The insert Menu

<verbatim>
   * Set SMARTEDITSTRINGSITE = <tselement><tsname>Table of content</tsname><tsstring>%<nop>TOC%</tsstring></tselement><tselement><tsname>The TWiki logo</tsname><tsstring>%<nop>WIKILOGOIMG%</tsstring></tselement><tselement><tsname>Simple comment(below)</tsname><tsstring>%<nop>COMMENT{type=\"below\"}%</tsstring></tselement>
</verbatim>

Icons

<verbatim>
   * Set SMARTEDITICONS = %ICON{bubble}% %ICON{days}% %ICON{download}% %ICON{filter}% %ICON{globe}% %ICON{info}% %ICON{stop}% %ICON{warning}% %ICON{person}% %ICON{persons}%
</verbatim>

---+++ In your web preferences :

<verbatim>
   * Set SMARTEDITSTRINGWEB  =   <tselement><tsname>Current web</tsname><tsstring>%<nop>WEB%</tsstring></tselement>
</verbatim>

---+++ In your personnal preferences (each user can set it in the personal page)

<verbatim>
      * Set SMARTEDITSTRINGUSERS =  <tselement><tsname>My Email</tsname><tsstring>toto@toto.com</tsstring></tselement>
</verbatim>

---++ Add-On Info

   * Set SHORTDESCRIPTION = Toolbar to help edit TWiki content

|  Add-on Author: | TWiki:Main/GaelCrova (Special thanks to TWiki:Main/ColasNahaboo and TWiki:Main/FredericLuddeni for their help and feedback)|
|  Add-on Version: | 07 Aug 2006 (v1.000) |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  18 Aug 2006: | IE Toolbar width fixed |
|  16 Aug 2006: | Tab and SHIFT-TAB events disabled in Opera - Help in a specific topic with the viewprint template |
|  16 Aug 2006: | Blanks in external links fixed |
|  10 Aug 2006: | solved display bug for insert internal link |
|  09 Aug 2006: | solved some bugs on TWiki 4.0.2 |
|  09 Aug 2006: | Removed some debug information |
|  08 Aug 2006: | HTML Tags corrected |
|  08 Aug 2006: | IE display fixed - wiki link bugs fixed |
|  07 Aug 2006: | Initial version |
|  CPAN Dependencies: | none |
|  Other Dependencies: | none |
|  Perl Version: | 5.005 |
|  License: | GPL |
|  Add-on Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topic:__ %TWIKIWEB%.TWikiAddOns

-- TWiki:Main/GaelCrova - 18 Aug 2006

Show attachments

Hide attachments

Topic attachments
I	Attachment	Action	Size	Date	Who
gif	bullist.gif	manage	0.1 K	10 Aug 2005 - 22:03	UnknownUser
gif	bold.gif	manage	0.1 K	10 Aug 2005 - 22:03	UnknownUser
gif	italic.gif	manage	0.1 K	10 Aug 2005 - 22:20	UnknownUser
gif	indent.gif	manage	0.1 K	10 Aug 2005 - 22:20	UnknownUser
gif	help.gif	manage	0.3 K	10 Aug 2005 - 22:20	UnknownUser
gif	outdent.gif	manage	0.1 K	10 Aug 2005 - 22:20	UnknownUser
gif	numlist.gif	manage	0.1 K	10 Aug 2005 - 22:20	UnknownUser
gif	search.gif	manage	0.2 K	15 Aug 2005 - 09:14	UnknownUser
gif	h5.gif	manage	0.1 K	21 Aug 2005 - 17:55	UnknownUser
gif	h6.gif	manage	0.1 K	21 Aug 2005 - 17:56	UnknownUser
gif	hr.gif	manage	0.1 K	22 Aug 2005 - 15:31	UnknownUser
gif	h3.gif	manage	0.1 K	04 Oct 2005 - 19:09	UnknownUser
gif	h4.gif	manage	0.1 K	04 Oct 2005 - 19:09	UnknownUser
gif	h2.gif	manage	0.1 K	04 Oct 2005 - 19:09	UnknownUser
gif	h1.gif	manage	0.1 K	04 Oct 2005 - 19:09	UnknownUser
png	undo.png	manage	0.9 K	08 Feb 2006 - 03:09	UnknownUser
png	redo.png	manage	0.9 K	08 Feb 2006 - 03:09	UnknownUser
png	wikilink.png	manage	0.5 K	08 Feb 2006 - 03:09	UnknownUser
png	exthyperlink.png	manage	0.8 K	08 Feb 2006 - 03:09	UnknownUser
png	nop.png	manage	0.5 K	08 Feb 2006 - 03:09	UnknownUser
png	code.png	manage	0.3 K	08 Feb 2006 - 03:09	UnknownUser
gif	g040.gif	manage	1.0 K	19 May 2006 - 15:15	UnknownUser
gif	g080.gif	manage	1.0 K	19 May 2006 - 15:16	UnknownUser
gif	close.gif	manage	0.2 K	05 Jun 2006 - 16:00	UnknownUser
gif	validate.gif	manage	0.9 K	05 Jun 2006 - 16:05	UnknownUser
jpg	upp.jpg	manage	9.0 K	13 Jun 2006 - 13:52	UnknownUser
jpg	down2.jpg	manage	8.8 K	13 Jun 2006 - 13:52	UnknownUser
jpg	left.jpg	manage	8.8 K	13 Jun 2006 - 13:52	UnknownUser
jpg	right1.jpg	manage	8.8 K	13 Jun 2006 - 13:52	UnknownUser
gif	separator.gif	manage	0.1 K	13 Jun 2006 - 14:14	UnknownUser
gif	adjust.gif	manage	1.0 K	13 Jun 2006 - 15:01	UnknownUser
gif	warning2.gif	manage	0.5 K	16 Jun 2006 - 09:36	UnknownUser
jpg	down.jpg	manage	0.1 K	29 Jun 2006 - 15:28	UnknownUser
jpg	up.jpg	manage	0.1 K	29 Jun 2006 - 15:29	UnknownUser
gif	boldItalic.gif	manage	0.1 K	30 Jun 2006 - 15:53	UnknownUser
gif	updown.gif	manage	0.2 K	30 Jun 2006 - 16:26	UnknownUser
gif	right.gif	manage	0.7 K	30 Jun 2006 - 16:53	UnknownUser
gif	loupe.gif	manage	0.5 K	03 Jul 2006 - 14:22	UnknownUser
gif	br.gif	manage	0.2 K	03 Jul 2006 - 14:30	UnknownUser
gif	info.gif	manage	0.6 K	12 Jul 2006 - 17:17	UnknownUser
gif	previous.gif	manage	0.6 K	13 Jul 2006 - 10:48	UnknownUser
gif	next.gif	manage	0.6 K	13 Jul 2006 - 10:48	UnknownUser
gif	testn.gif	manage	0.7 K	13 Jul 2006 - 10:53	UnknownUser
gif	testp.gif	manage	0.7 K	13 Jul 2006 - 10:53	UnknownUser
gif	warning.gif	manage	0.9 K	13 Jul 2006 - 11:03	UnknownUser
gif	preview.gif	manage	0.2 K	17 Jul 2006 - 16:26	UnknownUser
gif	ok.gif	manage	0.2 K	17 Jul 2006 - 16:45	UnknownUser
gif	bgbottom.gif	manage	0.1 K	18 Jul 2006 - 14:59	UnknownUser
gif	expand.gif	manage	0.1 K	21 Jul 2006 - 16:03	UnknownUser
gif	styles.gif	manage	0.4 K	26 Jul 2006 - 10:32	UnknownUser
png	background-toolbar.png	manage	3.5 K	26 Jul 2006 - 10:56	UnknownUser
gif	background-toolbar.gif	manage	0.9 K	26 Jul 2006 - 11:26	UnknownUser
gif	background-leftimg.gif	manage	0.9 K	26 Jul 2006 - 11:26	UnknownUser
gif	normal.gif	manage	0.3 K	27 Jul 2006 - 11:07	UnknownUser
gif	verbatim.gif	manage	0.3 K	27 Jul 2006 - 11:09	UnknownUser
gif	blockquote.gif	manage	0.3 K	27 Jul 2006 - 11:15	UnknownUser
gif	forecolorold.gif	manage	0.3 K	27 Jul 2006 - 11:57	UnknownUser
gif	transparent.gif	manage	0.1 K	27 Jul 2006 - 15:10	UnknownUser
gif	forecolor.gif	manage	0.3 K	27 Jul 2006 - 16:12	UnknownUser
png	strings.png	manage	0.9 K	27 Jul 2006 - 16:25	UnknownUser
png	smiley.png	manage	0.4 K	28 Jul 2006 - 11:07	UnknownUser
gif	line.gif	manage	0.3 K	28 Jul 2006 - 15:14	UnknownUser
gif	bg_ie.gif	manage	0.3 K	01 Aug 2006 - 14:32	UnknownUser
JPG	screenShotSmartEditor.JPG	manage	9.5 K	07 Aug 2006 - 15:07	UnknownUser
EXT	mochikit	manage	4.0 K	07 Aug 2006 - 15:44	UnknownUser
js	smartEditDynamicDivision.js	manage	1.9 K	08 Aug 2006 - 10:13	UnknownUser
db	Thumbs.db	manage	104.5 K	09 Aug 2006 - 11:35	UnknownUser
js	smartEditAutoCompletion.js	manage	9.0 K	10 Aug 2006 - 10:02	UnknownUser
css	twikismartstyle.css	manage	14.3 K	17 Aug 2006 - 10:59	UnknownUser
js	twikismartEvents.js	manage	7.2 K	17 Aug 2006 - 15:44	UnknownUser
js	smartEditUI.js	manage	77.5 K	18 Aug 2006 - 10:43	UnknownUser
js	twikismartEngine.js	manage	23.4 K	18 Aug 2006 - 11:17	UnknownUser
js	twikismartActions.js	manage	83.7 K	18 Aug 2006 - 11:18	UnknownUser

TWiki

Proyecto META
TWiki Web

User Reference

Admin Maintenance

Categories

Webs
Main
TWiki

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Proyecto META? Send feedback