Short description
Rebecca of pyCologne asked me to implement instead of the Syntax description at bottom of the text editor a tool box which inserts on clicking the input text with formatting into the textarea.
An idea how that could be solved was given by a request on SelfHtml
Here is a small example, which needs of course nice icons instead of text and some more improvement. -- ReimarBauer 2007-06-17 18:47:16
<HTML> <script type="text/javascript"> function wikicode(message, code_open, code_close, textarea_name) { var txt = prompt(message,""); if(txt) { var txt = code_open + txt + code_close; id = document.forms[0][textarea_name]; id.value += txt; id.focus(); } } </script> <FORM> <textarea name="textbox"> </textarea> <input type="button" value="Headings" onClick='wikicode("Headings:","= ", " =", "textbox")' /> <input type="button" value="Bullets" onClick='wikicode("Bullets:"," * ", "", "textbox")' /> </FORM> </HTML>
that code recognices the cursor position and coud be used for marked text too. http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/
Discussion
This idea is taken from wikipedia or docuwiki. Above the input field you have a row with small icons for italic,bold... . Underneath the input field you've got the buttons for "Save" "Cancel" "Preview". You can test it here: http://de.wikipedia.org/w/index.php?title=Luigi_Groto&action=edit .
Example of docuwiki http://wiki.splitbrain.org/playground:sandbox
If I see it correctly we have a continuum of editor enrichment from simple, plain text editors up to full wysiwyg editors as follows:
- First you can have a simple input field like we have it now.
- Second you can have some combination of a plain text editor and some wysiwyg editor feeling. That's maybe the suggested solution above like wikipedia does it.
See KlausHeinisch page pointing to WikiEdit tool. We used to have it in our Moin 1.1. and abandoned it when GUI editor came to market. It was easy to implement and hat at least one great feature even for a "syntax pro": indent and outdent. And in comparison with GUI editor, it is absolutely "risk-free" as it does not process the whole page. -- RobertSeeger 2007-06-18 08:59:23
Your feedback maybe shows that if you have a wysiwyg edit and a text edit, there is no real need to have an enhanced text edit which injects wikimarkup on clicking a button in the icon bar. The inexperienced users will mostly use the gui, the experts mostly the text edit. Instead of having an icon bar also in text edit, I would rather prefer to have some syntax highlighting there - but I'm not sure, whether syntax highlighting makes much sense with 'primitive' wikimarkup -- OliverSiemoneit 2007-06-18 14:11:25
using icons makes it easier in different themes adding a kind of simple help for using the textarea edit. In some themes currently the verbatim help of the syntax is not shown or the new or advanced user misses it. And on the other hand I don't see it problematic to have it combined with syntax highligthning which we do need for the gui editor too. -- ReimarBauer 2007-06-18 16:39:31
Third you can also do this: full wysiwyg feeling with some plain text editor look and feel, see http://jspwiki.org/wiki/WikiWizard.
- Fourth a full wysiwyg editor like we have it now already built in.
I think the pros and cons of the different hybrid solution (2) and (3) a worth an indepth discussion... -- OliverSiemoneit 2007-06-17 21:01:30
Related Suggestions for Improvments