Based on user story #98
User can create assets and edit the content of learning material with WYSIWYM editor:
http://en.wikipedia.org/wiki/WYSIWYM
WYSIWYM editor is used for example in WordPress.
The editor has 7 buttons in the toolbar. The buttons are displayed only if browser supports enough JavaScript? (example: buttons are not displayed in WordPress? with Safari 1.3.1, but are displayed with Firefox):
Bold
the selected text will be nested between <strong> and </strong>
Italics
the selected text will be nested between <em> and </em>
Link
user must insert URL and the selected text will become a hyperlink
Image
user must insert the src and alt of the image
Bulleted list
Code for empty bulleted list with 3 items will be inserted to the document:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
If the user needs more items she has to copy-paste the code.
Numbered list
Code for empty numbered list with 3 items will be inserted to the document:
<ol>
<li></li>
<li></li>
<li></li>
</ol>
If the user needs more items she has to copy-paste the code
Code
the selected text will be nested between <code> and </code>
Buttons under the body text area:
Save - document is saved and validated by XHTML validator. If the code is not valid XHTML, Toolbox tries top fix it or user will be redirected to document to make suggested corrections. If the code is valid, user will be redirected to edit the metadata of saved document.
Save and continue - document is saved and user is redirected to the same pae to continue editing (it's a good idea to save your work sometimes, because internet explorer might crash)
Cancel is not a button but a hyperlink. This way users will not confuse it with Save.
Paper prototype:
http://goedel.uiah.fi/projects/calibrate/attachment/ticket/123/wysiwym_editor_ver2.png?format=raw
