History: Status Editor Switch WYSIWYG
Source of version: 7 (current)
Copy to clipboard
{REMARKSBOX(type=>note, title=>Note)}
This page is work in progress. It describes the behavior when the editor is switched.
Below, the following color codes are used:
* ~~#0000FF:no test implemented~~
* ~~#FF0000:test failed~~
* test succeeded
{REMARKSBOX}
!Summary
{FANCYTABLE(
head="Item | Syntax%%%Wiki | Syntax%%%HTML | CKEditor UI | Wiki→HTML | HTML→Wiki",
colaligns=left | center | center | center | center | center
)}
[#Font_Family|Font Family] | ~~#FF0000:plugin~~ | style attribute | yes | ~~#FF0000:failure~~ | ~~#FF0000:failure~~
[#Font_Size|Font Size] | ~~#FF0000:plugin~~ | style attribute | yes | ~~#FF0000:failure~~ | ~~#FF0000:failure~~
[#Bold|Bold] | inline | tag%%%style attribute | yes | ~~#FF0000:no conversion~~ | good
[#Italic|Italic] | inline | tag%%%style attribute | yes | ~~#FF0000:no conversion~~ | good
[#Underlined|Underlined] | inline | tag%%%style attribute | yes | ~~#FF0000:different representation~~ | good
[#Strikethrough|Strikethrough] | inline | tag%%%style attribute | yes | ~~#FF0000:different representation~~ | good
[#Subscript|Subscript] | plugin | tag | yes | ~~#FF0000:no conversion~~ | good
[#Superscript|Superscript] | plugin | tag | yes | ~~#FF0000:no conversion~~ | good
[#Monospaced|Monospaced] | inline | tag%%%style attribute | ~~#FF0000:font only~~ | ~~#FF0000:failure~~ | ~~#0000FF:good~~
[#Teletype|Teletype] | plugin | tag | ~~#FF0000:no~~ | ~~#FF0000:failure~~ | good
[#Text_color|Text color] | inline | style attribute | yes | ~~#FF0000:failure~~ | good
[#Background_color|Background color] | inline | style attribute | yes | ~~#FF0000:failure~~ | ~~#0000FF:good~~
[#Block_Align_Left |Block Align Left] | (default)| style/align attribute | ~~#0000FF:?~~ | ~~#0000FF:?~~ | ~~#0000FF:?~~
[#Block_Align_Center|Block Align Center] | wiki | style/align attribute | ~~#0000FF:?~~ | ~~#0000FF:?~~ | ~~#0000FF:?~~
[#Block_Align_Right |Block Align Right] | plugin | style/align attribute | ~~#0000FF:?~~ | ~~#0000FF:?~~ | ~~#0000FF:?~~
[#Block_Align_Justify|Block Align Justify]| plugin | style/align attribute | ~~#0000FF:?~~ | ~~#0000FF:?~~ | ~~#0000FF:?~~
[#Paragraph_Alignment|Paragraph Alignment]| plugin | style/align attribute | ~~#0000FF:?~~ | ~~#0000FF:?~~ | ~~#0000FF:?~~
{FANCYTABLE}
!Details
!!Character Related Markup
!!!Font Family
*Wiki
**Markup:~~#FF0000:~np~{FONT(family="tahoma")}text{FONT}~/np~~~
*HTML
**Markup:~np~<span style="font-family: FONT;">text</span>~/np~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: {FONT(family="tahoma")}This text uses the Tahoma font{FONT}
;HTML: <span style="font-family: tahoma;">This text uses the Tahoma font</span>
{WYSIWYG}
{BOX}
!!!Font Size
*Wiki
**~~#FF0000:~np~{FONT(size="SIZEuu")}text{FONT}~/np~~~
*HTML
**Markup:~np~<span style="font-size: SIZEuu;">text</span>~/np~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: ~~#FF0000:missing~~
;HTML: <span style="font-size: 14px;">This text uses 14px font size.</span>
{WYSIWYG}
{BOX}
!!!Bold
*Wiki
**Markup: ~np~__bold__~/np~
*HTML
**Markup: ~np~<b>bold</b>~/np~
**Markup: ~np~<strong>bold</strong>~/np~ ~~#006400:(CKE and pre Jison Wiki parser)~~
**Markup: ~np~<span style="font-weight:bold;">bold</span>~/np~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: __This is bold text__
;HTML: <b>This is bold text using ‹b›</b>%%%<strong>This is bold text using ‹strong›</strong>%%%<span style="font-weight:bold;">This is bold text using 'font-weight'</span>
{WYSIWYG}
{BOX}
!!!Italic
*Wiki
**Markup: ~np~''italic''~/np~
*HTML
**Markup: ~np~<em>italic</em>~/np~ ~~#006400:(CKE and pre Jison Wiki parser)~~
**Markup: ~np~<i>italic</i>~/np~
**Markup: ~np~<span style='font-style:italic'>italic</span>~/np~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: ''This is italic''
;HTML: <em>This is italic using ‹em›</em>%%%<i>This is italic using ‹i›</i>%%%<span style='font-style:italic'>This is italic using 'font-style'</span>
{WYSIWYG}
{BOX}
!!!Underlined
*Wiki
**Markup: ~np~===underlined===~/np~
*HTML
**Markup: ~np~<u>underlined</u>~/np~ ~~#FF0000:(CKE)~~
**Markup: ~np~<span style="text-decoration:underline;">underlined</span>~/np~ ~~#FF0000:(pre Jison Wiki parser)~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: ===This is underlined===
;HTML: <u>This is underlined</u>%%%<span style="text-decoration:underline;">This is underlined</span>
{WYSIWYG}
{BOX}
!!!Strikethrough
*Wiki
**Markup: ~np~--strikethrough--~/np~
*HTML
**Markup: ~np~<strike>strikethrough</strike>~/np~ ~~#FF0000:(CKE)~~
**Markup: ~np~<del>strikethrough</del>~/np~ ~~#FF0000:(pre Jison Wiki parser)~~
**Markup: ~np~<s>strikethrough</s>~/np~
**Markup: ~np~<span style="text-decoration:line-through;">strikethrough</span>~/np~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: --This text uses strikethrough--
;HTML: <strike>This uses strikethrough using ‹strike›</strike>%%%<del>This text uses strikethrugh using ‹del›</del>%%%<s>This text uses strikethrugh using ‹s›</s>%%%<span style="text-decoration:line-through;">This text uses strikethrugh using 'text-decoration'</span>
{WYSIWYG}
{BOX}
!!!Subscript
*Wiki
**Markup: ~np~{SUB()}subscript{SUB}~/np~
*HTML
**Markup: ~np~<sub>subscript</sub>~/np~ ~~#006400:(CKE and plugin output)~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: This text is {SUB()}sub{SUB}script
;HTML: This text is <sub>sub</sub>script
{WYSIWYG}
{BOX}
!!!Superscript
*Wiki
**Markup: ~np~{SUP()}subscript{SUP}~/np~
*HTML
**Markup: ~np~<sup>superscript</sup>~/np~ ~~#006400:(CKE and plugin output)~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: This text {SUP()}super{SUP}script
;HTML: This text <sup>super</sup>script
{WYSIWYG}
{BOX}
!!!Monospaced
*Wiki
**Markup: ~np~-+monospaced+-~/np~
**If the markup is not at the beginning of a line, it must be preceded by a space.
*HTML
**Markup: ~np~<code>monospaced</code>~/np~ ~~#FF0000:(pre Jison Wiki parser)~~
**~~#0000FF:Markup: ~np~<span style="font-family: monospace;">monospaced</span>~/np~~~ ~~#FF0000:(CKE font selection, no button for html <code>)~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: -+This text is monospaced+-
;HTML: <code>This text is monospaced using ‹strike›</code>%%%<span style="font-family: monospace;">This text is monospaced using 'font-family'</span>
{WYSIWYG}
{BOX}
!!!Teletype
*Wiki
**Markup: ~np~{DIV(type="tt")}text{DIV}~/np~
*HTML
**Markup: ~np~<tt>text</tt>~/np~ ~~#FF0000:(plugin output, cannot be manipulated with the CKE UI)~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: {DIV(type="tt")}This text uses a typewriter font{DIV}
;HTML: <tt>This text uses a typewriter font</tt>
{WYSIWYG}
{BOX}
!!!Text color
*Wiki
**Markup:~np~~~COLOR:text~~~/np~
*HTML
**Markup:~np~<span style="color: COLOR;">text</span>~/np~ ~~#006400:(CKE and pre Jison Wiki parser both use rgb())~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: ~~#FF0000:This text is red~~
;HTML: <span style="color: #FF0000;">This text is red</span>
{WYSIWYG}
{BOX}
!!!Background color
*Wiki
**Markup:~np~~~ ,COLOR:text~~~/np~
**The space before the ',' is mandatory
*HTML
**Markup: ~np~<span style="background:COLOR;">text</span>~/np~
**Markup: ~np~<span style="background-color:COLOR;">text</span>~/np~
**~~#0000FF:Markup: ~np~<span style="background: none repeat scroll 0% 0% rgb(255, 0, 0);">text</span>~/np~~~ ~~#FF0000:(pre Jison Wiki parser)~~
{BOX(title=>Example)}
{WYSIWYG()}
;Wiki: ~~ ,#FFFF00:This background is yellow~~
;HTML: <span style="background: #FFFF00;">This background is yellow using 'background'</span>%%%<span style="background-color: #FFFF00;">This background is yellow using 'background-color'</span>
{WYSIWYG}
{BOX}
!!Text Related Markup
!!!Block Align Left
*Wiki
**Markup: ~np~text~/np~ (default alignment is left)
**~~#0000FF:Markup: ~np~{DIV(align="left")}text{DIV}~/np~~~
*HTML
**Markup: ~np~text~/np~ (default alignment is left)
**~~#0000FF:Markup: ~np~<div style="text-align: left;">text</div>~/np~~~ (plugin output)
**~~#0000FF:Markup: ~np~<div align="left">text</div>~/np~~~
{BOX(title=>Example, width=100%)}
{WYSIWYG()}
;Wiki: This is aligned left (default)%%%{DIV(align="left")}This is aligned left using 'DIV'{DIV}
;HTML: This is aligned left (default)<div style="text-align: left;">This aligned left using 'style'</div><div align="left">This aligned left using 'align'</div>
{WYSIWYG}
{BOX}
!!!Paragraph Alignment
*Alignements
**left
**center
**right
**justify
*Wiki
**~~#0000FF:Markup: ~np~{DIV(type="p", align="ALIGNEMENT")}text{DIV}~/np~~~
*HTML
**~~#0000FF:Markup: ~np~<p style="text-align: ALIGNEMENT;">text</p>~/np~~~ (plugin output)
**~~#0000FF:Markup: ~np~<p align="ALIGNEMENT">text</p>~/np~~~
{BOX(title=>Example, width=100%)}
{WYSIWYG()}
;Wiki: {DIV(type="p")}Default{DIV}{DIV(type="p", align="center")}This paragraph is centered{DIV}{DIV(type="p")}Default{DIV}
;HTML: <p>Default</p><p style="text-align: center;">This paragraph is centered using 'style'</p><p align="center">This paragraph is centered using 'align'</p><p>Default</p>
{WYSIWYG}
{BOX}
!Related
[http://doc.tiki.org/Wiki+Syntax|Wiki Syntax]
*[http://doc.tiki.org/Wiki-Syntax+Text|Wiki-Syntax Text]