Support/WYSIWYG:PRD

From MozillaWiki
Jump to: navigation, search
Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

Firefox Support Knowledge Base Editor WYSIWYG Requirements Document

Overview

The content area of the editor is the centerpiece of the editor, and the primary work area for knowledge base contributors. Not everyone knows tikiwiki markup, and in some cases use mediawiki markup. Some contributors may be more familiar with HTML, and the task of having to learn a new markup is a barrier new contributors have to cross to become frequent contributors. In a 2008 contributor survey[1], only 68.33% of contributors felt that tikiwiki markup was easy to learn. In addition to learning a new markup language, the use of things like SHOWFOR make it hard to visualize how an edit is going to change the look of an article.

By using a WYSIWYG ("What You See Is What You Get") editor, contributors can focus more on the content of their edits, without spending time

Backend

  • SHOWFOR must be rewritten, so that it uses one tag that will work for individual words as well as multiline sections.
  • Tikiwiki has a built-in WYSIWYG editor based on based on FCKEditor
    • Switching back and forth between WYSIWYG and tikiwiki markup has so many bugs that it is not recommended to make switching an option.
    • Upgrading to tikiwiki 3.0 is strongly recommended, due to bugs addressed in 3.0
    • FCKEditor v2 does not hide plugin code, which means that a SHOWFOR tag will have to be displayed as {SHOWFOR(fooo)} in the WYSIWYG editor. Version 3 (CKEditor) is still in Beta, and it will support this.
    • The experimental branche coe for tikiwiki enables us to not use HTML, so content is stored in tikiwiki syntax.

Frontend

  • When someone wants to edit any page, using the tiki built-in editor (tiki-editpage.php), this WYSIWYG editor what will be used.
  • Contributors should be able to switch between WYSIWYG and editing the tikiwiki markup.
  • Contributors should be able to view content as it would be displayed for each operating system and Firefox version.
  • Toolbar buttons will be used for formatting content, and adding non-text content.
  • Because the editing space should be representative of what the article will look like, it should be as wide as the article content area.
  • We'll need to create our own icons for toolbar buttons, which are for SUMO-specific features.
    • Menu path
    • Button
    • Kbd
    • File name/path
    • Pref name/value
    • SHOWFOR
    • Dynamic Content
    • Screencast


Toolbar items and markup

  • Bold will add __ before and after the text
  • Italics will add '' before and after the text
  • Link will trigger a pop-up, where the contributor can fill in the destination as either a URL or the name of another article with the option of pointing to an anchor.
    • URL links will add [ before the URL, | between the URL and the linked text, and ] after the linked text.
    • Another article links will add (( before the article name, <nowiki>| between the article name and the linked text, )) after the linked text, and | between the article name and the anchor if there is an anchor being linked to.
  • Numbered list will add # before the text
  • List will add * before the text
  • H1 will add ! before the text
  • H2 will add !! before the text
  • H3 will add !!! before the text
  • Menu path will insert the text in the MENU tag (e.g {MENU()}text{MENU} )
  • Button will insert the text in the DIV tag with button class (e.g {DIV(class=button,type=span)}text{DIV} )
  • Kbd will insert the text in the KBD tag (e.g {TAG(tag=kbd)}text{TAG} )
  • File name/path will insert the text in the FILE tag (e.g {FILE()}text{FILE} )
  • Pref name/value will insert the text in the PREF tag (e.g {PREF()}text{PREF} )
  • Code will will insert the text in the CODE tag (e.g {CODE()}text{CODE} )
  • Note will add ^ before and after the text
  • Table will trigger a pop-up, where the contributor can set the number of rows and columns. || will be inserted at the beginning and end of the table. | between each cell, and line break between rows.
  • Insert Image will trigger a pop-up, where the contributor can upload the image, insert the image, and set style parameters.
    • Image uploader (mandatory) will upload the image.
    • Insert image will add an IMG tag with the image location as the source (e.g. {img src="img/wiki_up/de7bf678042c17beec5512945b9966fb-1244670238-316-1.gif" }), and the following parameters
    • Alignment will set the imalign parameter in the img tag.
  • Insert Screencast will trigger a pop-up, where the contributor can upload the screencast, insert the screencast, and set style parameters.
    • Screencast uploader (mandatory) will upload the screencast.
    • Insert Screencast will add a {SCREENCAST} tag with the file name as the file (e.g. {SCREENCAST(file=>2f67051b951ba9efe87391e139252ba8-1244227422-425-0)}{SCREENCAST})
  • SHOWFOR will trigger a drop-down, that includes:
    • Windows will suround the text with {SHOWFOR(os=windows)}text{SHOWFOR}
    • Mac will suround the text with {SHOWFOR(os=mac)}text{SHOWFOR}
    • Linux will suround the text with {SHOWFOR(os=linux)}text{SHOWFOR}
    • Windows and Mac will suround the text with {SHOWFOR(os=mac+windows)}text{SHOWFOR}
    • Windows and Linux will suround the text with {SHOWFOR(os=linux+windows)}text{SHOWFOR}
    • Mac and Linux will suround the text with {SHOWFOR(os=linux+mac)}text{SHOWFOR}
    • –separator–
    • Firefox 3.5 will suround the text with {SHOWFOR(browser=firefox3.5)}text{SHOWFOR}
    • Firefox 3.0 will suround the text with {SHOWFOR(browser=firefox3.0)}text{SHOWFOR}
    • Firefox 3.0 and 3.5 will suround the text with {SHOWFOR(browser=firefox3)}text{SHOWFOR}
    • Firefox 2 will suround the text with {SHOWFOR(browser=firefox2)}text{SHOWFOR}
  • Dynamic Content (will trigger a drop-down that includes all content labels for the language assigned to the article)


Viewing options

Tabs at the bottom of content area will choose what you view.

WYSIWYG

  • Windows will render the page how it appears to Windows users.
  • Mac will render the page how it appears to Mac users.
  • Linux will render the page how it appears to Linux users.

and

  • Firefox 2
  • Firefox 3.0
  • Firefox 3.5

Source

(if you want to edit the tikiwiki markup) Will switch to a non-WYSIWYG editor, like what we have now.


Timeline

  • PRD finalized Q2 2009
  • UI finalized early Q3 2009
  • Rewrite SHOWFOR early Q3 2009
  • Install and implement backend Q3 2009
  • Frontend icons August 2009