Basic BBCode: Using the Rich Text Editor

[Caeli]

The (WYSIWYG) Rich Text Editor

All of us have done it - open up a new topic, hit reply for an interesting thread (or to make a new post to a roleplay)... and then saw a bunch of buttons and menus that are a little bit confusing and aren't explained much of anywhere.

Well, no more! ;D In this tutorial, you'll find a basic run-through of each button and option on Elliquiy's (WYSIWYG) Rich Text Editor.



A Quick Explanation of Terminology

WYSIWYG (pronounced wiz-ee-wig) is an acronym for What You See Is What You Get. It's a term used to describe an interface - in this case, Elliquiy's forum text editor - in which the input that the user sees in the text input area (the box that you type into when replying to a topic) is similar to or exactly what will be seen once you hit "post."

Rich text refers to text that can include additional formatting - text attributes like bold, underline, and italics, as well as embedded hyperlinks, color, font face, and numerous other formatting options.

The default text editor in Elliquiy is not WYSIWYG - but you have the option of making the editor WYSIWYG by default by going to your profile settings and checking the box next to the option, Show WYSIWYG editor on post page by default, and clicking the Change Profile button to save your changes.

You can also manually toggle the view of your text editor by clicking the last button in your text editor, the toggle view .

Elliquiy's text editor is composed of ten sets of text formatting options. They have been grouped by function:

• Basic Text Formatting
• Text Alignment
• Font Properties
• Embed Options
• Additional Text Formatting
• Type Properties
• Tables, Codes, and Quotes
• Lists and the Horizontal Rule
• Spoilers and Floats
• Remove Formatting and Toggle View

The general format of most BBCode has three parts: an opening tag, the inside content, and the closing tag:

Code Select Expand

[open]          content          [/close]
[b]             bold             [/b]

There are some tags that only require the use of a single tag; these will be pointed out and demonstrated. Otherwise, assume that the tag is structured in the general format.

Clicking the button or option within the drop-down menu will insert the opening and closing tags into the text editor. For most cases, simply typing the content you want to have affected by that property between the tags will do the trick; for some (notably, the embed options on the second row), you will need to add additional or other information.



1. Basic Formatting
These are basic rich text formatting options that alter the way your text is formatted. In some browsers, it is possible to achieve bolded, italicized, and underlined text by hitting ctrl+b, ctrl+i, or ctrl+u, respectively.

| Bold - Formats the text into bold face.
| Italicized - Italicizes the text.
| Underline - Underlines the text.
| Strikethrough - Puts a line through the baseline of the text.

Code Select Expand

[b]Bold text here.[/b]
[i]Italicized text here.[/i]
[u]Underlined text here.[/u]
[s]Striked text here.[/s]

Demonstration.

Bold text here.
Italicized text here.
Underlined text here.
Striked text here.

2. Text Alignment
These five options allow you to manipulate how your text is aligned in your post.

| Preformatted Text* - Keeps the text formatted as inputted, especially regarding spacing.
| Left Align - Aligns the text to the left margin. Text is flush left, with a ragged right edge. This is the default alignment.
| Centered - Centers the text. Each line is spaced equally from the left and right margins.
| Right Align - Aligns the text to the right margin. Text is flush right, with a ragged left edge.
| Justify Text - Text aligns to both the left and right margins.

* As a note, preformatted text will default to size 2 (between 7pt and 8pt font). To correct this, simply apply font face and size properties to your text as demonstrated in the code below.

Code Select Expand

[pre]Text goes here.[/pre] [pre][font=Verdana][size=10pt]Corrected text requires font and size formatting.[/size][/font][/pre]
[left]Text goes here.[/left]
[center]Text goes here.[/center]
[right]Text goes here.[/right]
[justify]Text goes here.[/justify]


Demonstration.

Left Align		Centered		Right Align		Pre-Formatted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit lacus, scelerisque sit amet blandit nec, tincidunt sed lectus. Morbi vitae sapien metus.		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit lacus, scelerisque sit amet blandit nec, tincidunt sed lectus. Morbi vitae sapien metus.		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit lacus, scelerisque sit amet blandit nec, tincidunt sed lectus. Morbi vitae sapien metus.		Lorem ipsum dolor sit amet,      consectetur adipiscing elit.           Sed elit lacus, scelerisque sit      amet blandit nec, tincidunt sed lectus. Morbi vitae sapien      metus.

Justified Text Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis auctor sapien sed viverra. Donec risus lorem, condimentum a cursus ac, hendrerit sit amet justo. Sed aliquam sem quis nibh malesuada scelerisque. Etiam enim velit, gravida vel egestas eget, mattis at metus. Nulla facilisi. Integer sapien libero, pharetra eget tincidunt ac, adipiscing eget est. Etiam bibendum mi at lacus congue bibendum. Donec egestas, purus vel mollis posuere, nisl felis auctor lorem, pellentesque elementum lacus sem euismod massa. Donec nisl odio, malesuada in convallis nec, aliquet eu tellus. In id lacus diam, et facilisis elit. Nullam egestas hendrerit dui vitae porta.

Praesent a mauris metus. Maecenas nec fringilla mi. Morbi porta congue magna id imperdiet. Sed iaculis dignissim nisl, nec congue ipsum accumsan a. Donec condimentum felis in lectus tristique a auctor libero viverra. Pellentesque blandit dolor orci. Cras tortor dui, bibendum et facilisis porttitor, venenatis eu dui. Donec id nisl sed arcu pellentesque tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ac sem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In blandit nulla sodales nisi tincidunt facilisis. Phasellus arcu est, fermentum quis placerat in, congue in urna. Sed dapibus accumsan enim, eu sagittis neque volutpat vel. In bibendum nunc vitae ipsum mollis sed elementum orci lacinia. Cras vitae libero odio. Nunc magna lorem, pretium vel egestas sit amet, facilisis faucibus metus. Suspendisse tellus arcu, tristique eu scelerisque sit amet, volutpat et mi. Ut ac dolor a justo vulputate porttitor.

3. Font Properties
These three drop-down menus allow you to apply additional properties to your fonts: font face, font size, and font color. Clicking on an option within the drop-down menu will automatically insert the appropriate opening and closing tags into your text editor.

Font Face - Allows you to change the font face. The default on Elliquiy is Verdana. Note that you can technically choose whichever font face you want; however, only members with that font installed on their computers will be able to view it correctly.

Font Size - Allows you to change the size of the font. The default on Elliquiy is 10pt or size 2. Values can be defined with _pt or a number between 1-7 (which correspond roughly to 8pt, 10pt, 12pt, 14pt, 18pt, 24pt, and 36pt).

Font Color - Allows you to change the color of the font. The default on Elliquiy is black. The color property can be defined with hexadecimal notation (also known as hex code, or hex) or with accepted color names.

Code Select Expand

[font=georgia]Hello world.[/font]
[size=14pt]Hello world.[/size] [size=4]Hello world.[/size]
[color=purple]Hello world.[/color]

Demonstration.

Hello world.
Hello world. Hello world.
Hello world.

4. Embed Options
These codes allow you to embed something into a post.

| Insert Image - Embeds an image into the post. You can also specify padding (pixels around the image), height, and width. An example of image padding can be found in this tutorial.
| Insert Hyperlink - Embeds a hyperlink (often shortened to 'link') into the specified text. Note that the URL comes after an equal sign in the opening tag.
| Insert Email - Formats the link as an email link.
| Insert FTP Link - Formats the link into an FTP (File Transfer Protocol) link.

Code Select Expand

[img]https://elliquiy.com/elluiki/images/4/4f/Troll-pin3.png[/img]
[img height=50]https://elliquiy.com/elluiki/images/4/4f/Troll-pin3.png[/img]
[img width=50]https://elliquiy.com/elluiki/images/4/4f/Troll-pin3.png[/img]

[url=https://elliquiy.com/forums/]Your link will be embedded into this text.[/url]
[email]caeli@elliquiy.com[/email]
[ftp]ftp://somedomain.com[/ftp] or [ftp=ftp://somedomain.com]Some text here.[/ftp]

Demonstration.

Your link will be embedded into this text.
caeli@elliquiy.com
ftp://somedomain.com or Some text here.

5. Additional Text Formatting
Besides bold, italics, underline, and strikethrough, there are two additional text formatting options you can use.

| Glow - Puts a glow with your choice of color around the text. Color values can be defined with the color name or a hex code.
| Shadow - Puts a shadow in your choice of color to a specified direction (top, left, right, bottom) of the text. Color values can be defined with the color name or a hex code.

Code Select Expand

[glow=purple,2]Text with a purple glow.[/glow]
[shadow=#0000FF,top]Text with a blue shadow to the top of your text.[/shadow]
[shadow=#FF0000,left]Text with a red shadow to the left of your text.[/shadow]
[shadow=orange,right]Text with a orange shadow to the right of your text.[/shadow]
[shadow=green,bottom]Text with a green shadow to the bottom of your text.[/shadow]

Demonstration.

Text with a purple glow.
Text with a blue shadow to the top of your text.
Text with a red shadow to the left of your text.
Text with a orange shadow to the right of your text.
Text with a green shadow to the bottom of your text.

6. Type Properties
These options affect the typeface.

| Superscript - Superscripts appear slightly smaller than the normal line of type and are set slightly above the baseline.
| Subscript - Subscripts appear slightly smaller than the normal line of type and are set below the baseline.
| Teletype - Font becomes monotype (that is, each character takes up one unit of space).

Code Select Expand

This is normal font. [sup]This is font in a superscript.[/sup]
This is normal font. [sub]This is font in a subscript.[/sub]

This font is not in teletype; compare it to the font below!
[tt]This font is now in teletype; compare it to the font above![/tt]

Demonstration.

This is normal font. ^{This is font in a superscript.}

This is normal font. _{This is font in a subscript.}

This font is not in teletype; compare it to the font below!
This font is now in teletype; compare it to the font above!

7. Tables, Codes, and Quotes

| Insert Table - This code allows you to set up a table with BBCode. No attributes can be specified. BBCode tables will be explained in a future tutorial, but the general idea can be digested here. Tables using BBCode are created with the same basic elements as HTML, but use square brackets [] instead of angled brackets <>.

| Insert Code - Any BBCode inside code tags will show up unformatted inside a code box (below). Code tags cannot be specified inside another set of code tags.

| Insert Quote - Places text inside a quote box. Quoting a forum post will insert a hyperlink to the original post and will include author, date, and time of the original. An author can be specified manually.

Demonstrating Tables.

Code Select Expand

[table]
[tr]
[td]Row 1, Cell 1 | [/td]
[td]Row 1, Cell 2[/td]
[/tr]
[tr]
[td]Row 2, Cell 1 | [/td]
[td]Row 2, Cell 2[/td]
[/tr]
[/table]

Row 1, Cell 1 |	Row 1, Cell 2
Row 2, Cell 1 |	Row 2, Cell 2

Demonstrating Quotes.

Code Select Expand

[quote]Quote without an author.[/quote]
[quote=Caeli]Quote with a manually-specified author.[/quote]
[quote author=Caeli link=topic=111535.msg4847662#msg4847662 date=1309162184]Quoted post with information included automatically.[/quote]

Quote without an author.

Quote with a manually-specified author.

Quoted post with information included automatically.

8. Lists and the Horizontal Rule

| Insert Unordered List - Your typical unordered list using bullets. You can nest a list within a listed item to create indented items; this will be explained in a future tutorial (or you can PM me for a crash course).
| Insert Ordered List - Your ordered list using numbers and letters. You can nest a list within a listed item to create indented items; this will be explained in a future tutorial (or you can PM me for a crash course).
| Horizontal Rule - Inserts a horizontal rule in your post that stretches fully from the left to right of its space. Does not use a closing tag.

Code Select Expand

[list]
[li]Unordered list item #1[/li]
[li]Unordered list item #2[/li]
[/list]
[hr]
[list type=decimal]
[li]Ordered list item #1[/li]
[li]Ordered list item #2[/li]
[/list]

Demonstration.

• Unordered list item #1
• Unordered list item #2

• Ordered list item #1
• Ordered list item #2

9. Spoilers and Floats

| Spoiler Text - Any text inside a spoiler will be hidden and accessible only after clicking on the spoiler bar. The text on the spoiler bar will read, "Spoiler: Click to Show/Hide" by default, but can be edited to show different text. The spoiler bar text can be broken into multiple lines, as demonstrated here. Spoilers can be nested inside spoilers.

Spoiler Box Size - Can be reduced by placing a Floatleft tag around the Hide Tag.

Like This

Code Select Expand

[float=left][spoiler=like this?]here[/spoiler][/float]

| Float Right - Anything within the float tag will be "floated" to the right margin; text and objects outside of the float tags will flow around the floated content. The effect is demonstrated here.

| Float Left - Anything within the float tag will be "floated" to the left margin; text and objects outside of the float tags will flow around the floated content. The effect is demonstrated here.

Code Select Expand

[spoiler]Spoiler without text specified for the spoiler bar.[/spoiler]

[spoiler=Click me, click me!]Spoiler with specified text for the spoiler bar.[/spoiler]

Demonstration.

Spoiler: Click to Show/Hide

Spoiler without text specified for the spoiler bar.

Click me, click me!

Spoiler with specified text for the spoiler bar.

10. Remove Formatting and Toggle View

| Remove Formatting - After highlighting text in the text editor, clicking this button will remove any formatting (BBCode) applied on the text.
| Toggle View - Switch views between the WYSIWYG editor and the text editor that allows you to view your code.



And that is a quick comprehensive run-through of the WYSIWYG text editor used on Elliquiy!

These are NOT the only tags you can use to code and format your text. Some extras that Vekseid has provided for us can be found in this tutorial.

A comprehensive list of basic bulletin board code (BB Code) for SMF (Simple Machines forums, the style of forums that Elliquiy uses) can be found through the help page. As a reference, a basic list of BBCode can also be found at the following link: http://wiki.simplemachines.org/smf/Basic_bulletin_board_codes

There are many ways you can use BBCode to spice up your posts and format them exactly to your liking. The best way to learn is to experiment!

Enjoy. :)