AniDB RTE: Difference between revisions

From AniDB
Jump to navigation Jump to search
 
(21 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{TOCright}}
{{TOCright}}
= The AniDB '''R'''ich '''T'''ext '''E'''ditor =


The AniDB '''R'''ich '''T'''ext '''E'''ditor<br>
This page will try to explain the AniDB RTE and why it isn't your standard Rich Text Editor.
This page will try to explain the AniDB RTE and why it isn't your standard Rich Text Editor.


== What is an RTE ==
== What is an RTE ==
 
A Rich Text Editor is a User Interface control that replaces a standard HTML textarea element; it allows for the rich formatting of text content, including common structural treatments like lists, or formatting treatments like bold and italic text. These formatting options are applied in real time, so that you get an immediate feedback on what you are doing. This is pretty much what you should be used to from using a word processing application like MS Word, Open Office Writer, etc.
A Rich Text Editor is a User Interface control that replaces a standard HTML textarea element; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, these formatting options are applied live so that you can get an immediate feeling of what you are doing, much like what you get when using a word processing application like MS Word, Open Office Writer, etc.


== How does an RTE work ==
== How does an RTE work ==
An RTE is usually an html document within an iframe with the contentEditable attribute enabled which allows for the editing of the document in your browser, there is then a set of basic commands for doing basic commands, these basic commands are done via the document.execCommand command, stuff like bold, italic and so on are applied with this command, execCommand also has another functions to control how an RTE works.<br>
The RTE interface was developed by Microsoft and ported to other browsers by their respective vendors, much like the xmlhttprequest function that is core of AJAX.


An RTE is usually an html document within an iframe with the contentEditable attribute enabled which allows for the editing of the document in your browser, there is then a set of basic commands for doing basic commands, these basic commands are done via the document.execCommand command, stuff like bold, italic and so on are applied with this command, execCommand also has another functions to control how an RTE works.<br />
The content of the edited document is then sent by some way to the server, usually by an HTTP POST command, servers then store the content and after display it.
The RTE interface was developed by microsoft and ported to other browsers by their respective vendors, much like the xmlhttprequest function that is core of AJAX.


The content of the edited document is then sent by some way to the server, usually by an HTTP POST command, server then store the content and after display it.
The problem is that vendors more or less follow specifications standards with some not respecting execCommands which control how the editor works. This makes coding an RTE a very complicated issue if one intends to support multiple browsers with lots of hacked in code to support/work-around browser quirks.


The problem is that vendors more or less follow specifications standards with some not respecting execCommands which control how the editor works. This makes coding an rte a very complicated issue if one intends to support multiple browsers with lots of hacked in code to support/work-around browser quirks.
Every RTE has a lot of code, which can be either client, server-sided or both, to process the input, clean it up and adapt the data to the servers requirements.
 
Every rte has a lot of code, which can be either client, server-sided or both, to process the input, clean it up and adapt the data to the servers requirements.


== The AniDB case ==
== The AniDB case ==
 
AniDB doesn't store html formatted content like many other sites do, AniDB had for a long time a kind of tags, much like to the phpBB forum, like <tt>[b]some bold text[/b]</tt> and so on.<br>
AniDB doesn't store html formated content like many other sites do, anidb had for a long time a kind of tags, much like to the phpbb forum, like [b]some bold text[/b] and so on.<br />
Whenever you used one of these tags in a review or message or whatever those tags were then saved to the server and then parsed and converted to html content on display by the server, so the above text would be returned as "'''some bold text'''".
Whenever you used one of these tags in a review or message or whatever those tags were then saved to the server and then parsed and converted to html content on display by the server, so the above text would be returned as "'''some bold text'''".


=== Supported tags ===
=== Supported tags ===
 
* <tt>[b]...[/b]</tt> - bold text
The commands supported at first were:
* <tt>[i]...[/i]</tt> - italic text
 
* <tt>[u]...[/u]</tt> - underline
* [b]...[/b] - bold text
* <tt>[s]...[/s]</tt> - line-trough style
* [i]...[/i] - italic text
* <tt>[ul]...[/ul]</tt> - unordered lists
* [u]...[/u] - underline
* <tt>[ol]...[/ol]</tt> - ordered lists
 
* <tt>[li]...[/li]</tt> - lists items (go inside both <tt>[ul]</tt> and <tt>[ol]</tt>)
These were then expanded to:
* <tt>[quote]...[/quote]</tt> - quoted text without name
 
* <tt>[quote=USERNAME]...[/quote]</tt> - quoted text with name referenced
* [s]...[/s] - line-trough style
* <tt>[code]...[/code]</tt> - non-formatted text
* [ul]...[/ul] - unordered lists
* <tt>[spoiler]...[/spoiler]</tt> - text is hidden; visibility of text can be toggled using "Show/Hide Spoiler" button
* [ol]...[/ol] - ordered lists
* <tt>[url]HREF[/url]</tt> - link to URL where text is the same as the URL (can only be used to link AniDB domain URLs)
* [li]...[/li] - lists items (go inside both [ul] and [ol])
* <tt>[url=HREF]...[/url]</tt> - link to URL where text is different from the URL (can only be used to link AniDB domain URLs)
* [br] - for adding line breaks
* <tt>[img]HREF[/img]</tt> - link to an image
 
Some alternative methods to add lists were also added:
 
<pre>* list item 1
* list item 1</pre>
 
will produce an unordered list much the same as doing [ul][li]list item 1[/li][li]list item 2[/li][/ul]
 
<pre># list item 1
# list item 2</pre>
 
will produce an ordered list much the same as doing [ol][li]list item 1[/li][li]list item 2[/li][/ol]
 
Around this time linking to anidb was also made possible with the following format [type of link:attribute of link:text of link]:
 
* [anime:AID:some text] - links to an anime page
* [ep:EID:some text] - links to an episode page
* [file:FID:some text] - links to a file page
* [group:GID:some text] - links to a group page
* [producer:PRID:some text] - links to a producer page
* [user:UID:some text] - links to an user userpage
* [votes:UID:some text] - links to an user votes page
* [creq:CREQID:some text] - links to a creq
* [reviews:AID:some text] - links to anime reviews
* [mylist:UID:some text] - links to an user mylist
* [review:AID:REVIEWID] - links to a specific review
* [titles:AID:some text] - links to the titles of an anime
* [producers:AID:some text] - links to an anime producers page
* [cats:AID:some text] - links to an anime categories page
* [relations:AID:some text] - links to an anime relations page
* [groupcmts:ID:some text] - links to a group comments page
* [tracker:ID:some text] - links to an anidb tracker item
* [wiki::PAGE] - links to an anidb wiki page
* [forum.board:FORUMBOARDID:some text] - links to an anidb forum board
* [forum.post:FORUMPOSTID:some text] - links to an anidb forum post
* [forum.topic:FORUMTOPICID:some text] - links to an anidb forum topic
 
All of these can be added manually to any pm, review or comment and will be parsed accordingly, the RTE will also provide buttons and usually keyboard shortcuts to apply the above format.


=== Piece it all together ===
=== Piece it all together ===
Now that you know all the commands/tags what really happens when you write something in the RTE is:
Now that you know all the commands/tags what really happens when you write something in the RTE is:


# You type all the text you wish and apply all the formating you wish
# You type all the text you wish and apply all the formatting you wish
# You press add/submit/send/whatever
# You press add/submit/send/whatever
# Before your text is actually submitted to the server it will be parsed and known html commands will be converted to the anidb format
# Before your text is actually submitted to the server it will be parsed and known html commands will be converted to the AniDB format
# Your text is submitted to the server
# Your text is submitted to the server


Line 90: Line 48:


=== How can it go wrong ===
=== How can it go wrong ===
This is a run down of the most usual cases for the output to look like crap and most efficient solutions.
This is a run down of the most usual cases for the output to look like crap and most efficient solutions.


==== Known causes for text to be borked ====
==== Known causes for text to be borked ====
* You did a copy paste from word or some other editor
* You did a copy paste from word or some other editor
* You did a copy paste from a site
* You did a copy paste from a site


==== What can you do to fix the output ====
==== What can you do to fix the output ====
 
* First and most useful is before copy/pasting text from a text editor first paste it in "Mode: Advanced" to remove the underlying formats and then switch to "Mode: Visual" if needed.
* First and most useful is before copy/pasting text from a text editor first paste it in notepad to remove the underlying formats and then copy/paste the notepad text into the the RTE and apply formating in the RTE
* Disable JavaScript and reload the page and use the normal textarea to clean up the content
* Disable javascript and reload the page and use the normal textarea to clean up the content
* Bug fahrenheit until he finds out what have you done wrong and solve the issue
* Bug fahrenheit until he finds out what have you done wrong and solve the issue


== Browser Support ==
== Browser Support ==
 
Here is a list of the currently browser support and some notes about them:<br>
Here is a list of the currently browser support and some notes about them:</br>
For visual preview of the current browser support check this [[http://anidb.net/perl-bin/animedb.pl?show=cmt&id=17941 forum thread]].
<tt>For visual preview of the current browser support check this [[http://anidb.net/perl-bin/animedb.pl?show=cmt&do=news&id=166#c45412|news item]].</tt>


=== Supported ===
=== Supported ===
* Internet Explorer 7 - No issues
* Internet Explorer 7/8 - Can't correctly insert lists
* Firefox/Gecko 2.0 - No issues
* Firefox/Gecko 2.0 - No issues
* Opera 9.27 - No issues
* Opera 9.27 - Can't correctly insert lists
* Safari/AppleWebKit 3.1 - Underline and line-trough disabled due to engine lack of support for some functions
* Safari/AppleWebKit 3.1 - No Issues


=== Not Supported ===
=== Not Supported ===
* Any non-javascript enabled browser
* Any non-JavaScript enabled browser
* Any browser that browser that doesn't support document.contentEditable (ie: Opera 8)
* Any browser that doesn't support document.contentEditable (i.e.: Opera 8)


=== Not tested by AniDB ===
=== Not tested by AniDB ===
* Any other browser and or browser versions
* Any other browser and or browser versions
[[Category:Features]]

Latest revision as of 10:26, 20 August 2014

The AniDB Rich Text Editor
This page will try to explain the AniDB RTE and why it isn't your standard Rich Text Editor.

What is an RTE

A Rich Text Editor is a User Interface control that replaces a standard HTML textarea element; it allows for the rich formatting of text content, including common structural treatments like lists, or formatting treatments like bold and italic text. These formatting options are applied in real time, so that you get an immediate feedback on what you are doing. This is pretty much what you should be used to from using a word processing application like MS Word, Open Office Writer, etc.

How does an RTE work

An RTE is usually an html document within an iframe with the contentEditable attribute enabled which allows for the editing of the document in your browser, there is then a set of basic commands for doing basic commands, these basic commands are done via the document.execCommand command, stuff like bold, italic and so on are applied with this command, execCommand also has another functions to control how an RTE works.
The RTE interface was developed by Microsoft and ported to other browsers by their respective vendors, much like the xmlhttprequest function that is core of AJAX.

The content of the edited document is then sent by some way to the server, usually by an HTTP POST command, servers then store the content and after display it.

The problem is that vendors more or less follow specifications standards with some not respecting execCommands which control how the editor works. This makes coding an RTE a very complicated issue if one intends to support multiple browsers with lots of hacked in code to support/work-around browser quirks.

Every RTE has a lot of code, which can be either client, server-sided or both, to process the input, clean it up and adapt the data to the servers requirements.

The AniDB case

AniDB doesn't store html formatted content like many other sites do, AniDB had for a long time a kind of tags, much like to the phpBB forum, like [b]some bold text[/b] and so on.
Whenever you used one of these tags in a review or message or whatever those tags were then saved to the server and then parsed and converted to html content on display by the server, so the above text would be returned as "some bold text".

Supported tags

  • [b]...[/b] - bold text
  • [i]...[/i] - italic text
  • [u]...[/u] - underline
  • [s]...[/s] - line-trough style
  • [ul]...[/ul] - unordered lists
  • [ol]...[/ol] - ordered lists
  • [li]...[/li] - lists items (go inside both [ul] and [ol])
  • [quote]...[/quote] - quoted text without name
  • [quote=USERNAME]...[/quote] - quoted text with name referenced
  • [code]...[/code] - non-formatted text
  • [spoiler]...[/spoiler] - text is hidden; visibility of text can be toggled using "Show/Hide Spoiler" button
  • [url]HREF[/url] - link to URL where text is the same as the URL (can only be used to link AniDB domain URLs)
  • [url=HREF]...[/url] - link to URL where text is different from the URL (can only be used to link AniDB domain URLs)
  • [img]HREF[/img] - link to an image

Piece it all together

Now that you know all the commands/tags what really happens when you write something in the RTE is:

  1. You type all the text you wish and apply all the formatting you wish
  2. You press add/submit/send/whatever
  3. Before your text is actually submitted to the server it will be parsed and known html commands will be converted to the AniDB format
  4. Your text is submitted to the server

So whenever the parser tries to parse some html command and it doesn't find a match it will send the text as is to the server which will then convert it to plain and harmless text which will look but ugly in your review.

How can it go wrong

This is a run down of the most usual cases for the output to look like crap and most efficient solutions.

Known causes for text to be borked

  • You did a copy paste from word or some other editor
  • You did a copy paste from a site

What can you do to fix the output

  • First and most useful is before copy/pasting text from a text editor first paste it in "Mode: Advanced" to remove the underlying formats and then switch to "Mode: Visual" if needed.
  • Disable JavaScript and reload the page and use the normal textarea to clean up the content
  • Bug fahrenheit until he finds out what have you done wrong and solve the issue

Browser Support

Here is a list of the currently browser support and some notes about them:
For visual preview of the current browser support check this [forum thread].

Supported

  • Internet Explorer 7/8 - Can't correctly insert lists
  • Firefox/Gecko 2.0 - No issues
  • Opera 9.27 - Can't correctly insert lists
  • Safari/AppleWebKit 3.1 - No Issues

Not Supported

  • Any non-JavaScript enabled browser
  • Any browser that doesn't support document.contentEditable (i.e.: Opera 8)

Not tested by AniDB

  • Any other browser and or browser versions