- Invitation Status
- Not accepting invites at this time
- Posting Speed
- Multiple posts per week
- 1-3 posts per week
- One post per week
- Slow As Molasses
- Online Availability
- 12NN-4PM, 7PM~
- Writing Levels
- Intermediate
- Adept
- Advanced
- Adaptable
- Preferred Character Gender
- No Preferences
- Genres
- Horror, Dark Fantasy, Modern
Are you new to the forum scene and overwhelmed by the Rich Text Editor? Don't worry, this guide has got you covered. I will explain what each button does (starting from the left) and also provide you with demonstrations. I hope you learn something new after reading this guide!
With that introduction out of the way, let's get dissecting!
Erases formatting.
Adds a bold font weight to your text. Highlight the text you want to format and click this icon (or hit CTRL+B).
Italicizes your text. Highlight the text you want to italicize and click this icon (or hit CTRL+I).
Allows you to pick your font size. Highlight the text you want to alter, click this icon, and choose a size from the drop-down menu.
This allows you to change the color of your text. Click this icon to view the color palette. You can also input hex codes, which will provide a wider range of color options. Use a photo manipulation software like Photoshop or a website like HTML Color Codes to get the hex code of your preferred color.
Click this icon to view more text formatting options. They are as follows:
Press this icon to view the drop-down menu for lists and indentation.
This allows you to create a numbered list. Highlight your text, click the icon, then choose 'Ordered List' from the drop-down menu. (Demonstration GIF)
This allows you to create an unordered list. Highlight your text, click the icon, and choose 'Unordered List' from the drop-down menu. (Demonstration GIF)
This pushes the text away from the margin. Highlight the text you want to indent, press the icon, and choose 'Indent' from the drop-down menu. (Demonstration GIF)
This removes the indentation. Highlight the text you want to outdent, press the icon, and choose 'Outdent' from the drop-down menu. (Demonstration GIF)
Press this icon to view the alignment options.
This will align your text to the LEFT. Highlight the text you want to align, then choose this icon from the drop-down menu.
This will CENTER your text. Highlight the text you want to center, then choose this icon from the drop-down menu.
This will align your text to the RIGHT. Highlight the text you want to align, then choose this icon from the drop-down menu.
This will JUSTIFY your text. Highlight the text you want to justify, then choose this icon from the drop-down menu.
Add links with this icon. Press this icon and input the target URL in the first text box. Write your anchor text in the second text box. (Demonstration GIF)
To insert an image, click this icon, then drag and drop your desired image from your directory. You can also copy-paste the direct link of an image into the provided text box. (Demonstration GIF)
Click the smiley face to open the emoji panel. Use the search bar to look for specific emojis. (Demonstration GIF)
Use this button to insert media sourced from external websites like YouTube, Spotify, etc. Click the button then copy-paste the media URL in the provided box. (Demonstration GIF)
Highlight the text you want to quote, then press this icon. (Demonstration GIF)
To create a table, click this icon then choose your preferred dimensions. The table will render in the text editor. You can then input your text inside each cell. (Demonstration GIF)
You will find this icon after the table icon. Click to view more editing options. They are as follows:
This undoes your last edit.
This will redo a task that was previously undone.
Toggle to switch between raw code and rich text.
Save Draft - Will allow you to save your current progress, so that your content remains in the thread's reply box even when you navigate away from the page.
Delete Draft - Content will not remain in the thread's reply box when you navigate away from the page.
Will allow you to preview your coding before posting.
With that introduction out of the way, let's get dissecting!
TEXT FORMATTING
Erases formatting.
Adds a bold font weight to your text. Highlight the text you want to format and click this icon (or hit CTRL+B).
This is bold!
Italicizes your text. Highlight the text you want to italicize and click this icon (or hit CTRL+I).
This is italicized!
Allows you to pick your font size. Highlight the text you want to alter, click this icon, and choose a size from the drop-down menu.
This is 9px.
This is 10px.
This is 12px.
This is 15px.
This is 18px.
This is 22px.
This is 26px.
This is 10px.
This is 12px.
This is 15px.
This is 18px.
This is 22px.
This is 26px.
This allows you to change the color of your text. Click this icon to view the color palette. You can also input hex codes, which will provide a wider range of color options. Use a photo manipulation software like Photoshop or a website like HTML Color Codes to get the hex code of your preferred color.
Click this icon to view more text formatting options. They are as follows:
This allows you to change the font of your text. Highlight the text you want to format, click this button, then choose the desired font family from the drop-down menu.
This allows you to preview and insert a Google font.
This adds a line through your text. Highlight the text you want to format then click this icon (or hit CTRL+S).
This is strikethrough!
This underlines your text. Highlight the text you want to underline then click this icon (or hit CTRL+U).
This prevents code from rendering on the page, thus showing the raw code. As the name suggests, inline code stays in the same line as the text that surrounds it.
This blurs content (text and pictures) while remaining along the same line as the text or images that surrounds it. Typically used to hide spoilers.
This is Rakkas.
This allows you to preview and insert a Google font.
This is Pirata One.
This adds a line through your text. Highlight the text you want to format then click this icon (or hit CTRL+S).
This underlines your text. Highlight the text you want to underline then click this icon (or hit CTRL+U).
This is underline!
This prevents code from rendering on the page, thus showing the raw code. As the name suggests, inline code stays in the same line as the text that surrounds it.
[B]This text is supposed to be bold,[/B] but because of Inline Code, the font weight does not render and instead shows the raw code.This blurs content (text and pictures) while remaining along the same line as the text or images that surrounds it. Typically used to hide spoilers.
This is an inline spoiler, and as you can see it stays in the same line as the rest of the text.
LISTS AND INDENTATION
Press this icon to view the drop-down menu for lists and indentation.
This allows you to create a numbered list. Highlight your text, click the icon, then choose 'Ordered List' from the drop-down menu. (Demonstration GIF)
- This is a list item.
- This is a list item.
- This is a list item.
This allows you to create an unordered list. Highlight your text, click the icon, and choose 'Unordered List' from the drop-down menu. (Demonstration GIF)
- This is a list item.
- This is a list item.
- This is a list item.
This pushes the text away from the margin. Highlight the text you want to indent, press the icon, and choose 'Indent' from the drop-down menu. (Demonstration GIF)
This paragraph is indented. That is intended. This paragraph is indented. That is intended. This paragraph is indented. That is intended. This paragraph is indented. That is intended. This paragraph is indented. That is intended. This paragraph is indented. That is intended.
This removes the indentation. Highlight the text you want to outdent, press the icon, and choose 'Outdent' from the drop-down menu. (Demonstration GIF)
This paragraph is outdented. That is intended. This paragraph is outdented. That is intended. This paragraph is outdented. That is intended. This paragraph is outdented. That is intended. This paragraph is outdented. That is intended. This paragraph is outdented. That is intended.
TEXT ALIGNMENT
Press this icon to view the alignment options.
This will align your text to the LEFT. Highlight the text you want to align, then choose this icon from the drop-down menu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue eros quam, id tincidunt lectus aliquet eget. Cras odio nibh, ullamcorper id arcu eu, gravida maximus mi. Vivamus rhoncus arcu id consequat sodales.
This will CENTER your text. Highlight the text you want to center, then choose this icon from the drop-down menu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue eros quam, id tincidunt lectus aliquet eget. Cras odio nibh, ullamcorper id arcu eu, gravida maximus mi. Vivamus rhoncus arcu id consequat sodales.
This will align your text to the RIGHT. Highlight the text you want to align, then choose this icon from the drop-down menu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue eros quam, id tincidunt lectus aliquet eget. Cras odio nibh, ullamcorper id arcu eu, gravida maximus mi. Vivamus rhoncus arcu id consequat sodales.
This will JUSTIFY your text. Highlight the text you want to justify, then choose this icon from the drop-down menu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue eros quam, id tincidunt lectus aliquet eget. Cras odio nibh, ullamcorper id arcu eu, gravida maximus mi. Vivamus rhoncus arcu id consequat sodales.
OTHERS
Add links with this icon. Press this icon and input the target URL in the first text box. Write your anchor text in the second text box. (Demonstration GIF)
To insert an image, click this icon, then drag and drop your desired image from your directory. You can also copy-paste the direct link of an image into the provided text box. (Demonstration GIF)
Click the smiley face to open the emoji panel. Use the search bar to look for specific emojis. (Demonstration GIF)
Use this button to insert media sourced from external websites like YouTube, Spotify, etc. Click the button then copy-paste the media URL in the provided box. (Demonstration GIF)
Highlight the text you want to quote, then press this icon. (Demonstration GIF)
To create a table, click this icon then choose your preferred dimensions. The table will render in the text editor. You can then input your text inside each cell. (Demonstration GIF)
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
You will find this icon after the table icon. Click to view more editing options. They are as follows:
This will add a HORIZONTAL LINE between your content. It's a good way to separate chunks of information.
To spoiler your content, highlight it then click this icon. There will be a pop-up. Type your desired title for the spoiler button. (Demonstration GIF)
To display raw code, highlight your content then click this icon. There will be a pop-up. Choose the code's language from the drop-down menu, then press continue. (Demonstration GIF)
The insert button. This feature is currently bugged.
There is a horizontal line below this text.
There is a horizontal line above this text.
There is a horizontal line above this text.
To spoiler your content, highlight it then click this icon. There will be a pop-up. Type your desired title for the spoiler button. (Demonstration GIF)
You have been spoiled!
JavaScript:
console.log("Hello World")UNDO, SAVE, AND PREVIEW
This undoes your last edit.
This will redo a task that was previously undone.
Toggle to switch between raw code and rich text.
Save Draft - Will allow you to save your current progress, so that your content remains in the thread's reply box even when you navigate away from the page.
Delete Draft - Content will not remain in the thread's reply box when you navigate away from the page.
Will allow you to preview your coding before posting.
This is the updated version of Sen's Beginner's Guide to the Rich Text Editor
Last edited:
