How to Use the Formatting Options on Our Article Creation Editor

Last Updated: Feb 09, 2016 08:48AM PST
In June of 2014, we released a WYSIWYG editor, supported by CKEditor, to the Article writing process. This editor allows more flexibility in formatting your article and allows you to view your formatting changes in real time. It also offers the option to format the article in HTML.
 

CKEditor toolbar on Experts Exchange

The following is an explanation of each formatting option.
 

Source – New


Source button

The Source button will initiate a dialog that allows you to modify the editor output in the HTML format. Supported HTML is listed in the following text of this document. Any HTML you use outside of the supported list will be ignored. This option should only be used by those familiar with HTML. 
 

Cut – New


Cut button
 
The Cut button will cut the selected text out of its current location in your document and place it in your clipboard. The text may then be pasted (via controls or CTRL+V) in any location. Cut can also be triggered by using the controls CTRL+X.
 

Copy – New


Copy button
 
The Copy button will copy the selected text in your document and place it in your clipboard. The text may then be pasted (via controls or CTRL+V) in any location. Copy can also be triggered by using the controls CTRL+C.
 

Paste/Paste as Plain Text/Paste from Word - New


Paste buttons

The Paste buttons will allow you to enter any text currently in your clipboard into your document. “Paste” will attempt to match all formatting applied in the original source of the document you copied from. “Paste as Plain Text” will only paste the text copied and disregard all formatting. “Paste from Word” should be used if you authored the text in Microsoft Word, as it uses special formatting. Paste can also be triggered by using the controls CTRL+V.
 

Undo/Redo - New


Undo/Redo buttons
 
Undo and Redo will allow you to move forwards and backwards through your most recent set of changes to the document. CTRL+Z will “Undo” and CTRL+Y will “Redo” your most recent changes.
 

Find and Replace – New


Find and Replace buttons
 
Use Find or Replace when you need to find all instances of a specific term. Replace will allow you to put a new term in place of the existing term, while Find will just highlight any instance of the term.
 

Bold


Bold button
 
The Bold button will make the selected text thicker, and appear darker. The emphasized text strongly stands out from the rest; it should therefore be used to highlight certain keywords that are important to the subject of the text, for easy visual scanning of text. Bold can also be triggered by using the controls CTRL+B. e.g  Bold
 
HTML: 
<b>bold</b>

Previous Format:
[b]bold[/b]
 

Italic


Italic button
 
The Italic button will make the selected text slant to the right. Italics should be used when Introducing or defining new terms, for the title of works, or for adding emphasis. Italic can also be triggered by using the controls CTRL+I. e.g. Italic
 
HTML:
<i>italic</i>

Previous Format:
[i]italic[/i]
 

Underline


Underline button
 
The Underline button will make the selected text appear with a line beneath it.  Underlines should be used when Introducing or defining new terms, for the title of works, or for adding emphasis. Underline can also be triggered by using the controls CTRL+U. e.g. Underline
 
HTML:
<u>Underline</u>

Previous Format:
[u]underline[/u]
 

Strikethrough – New


Strikethrough button
 
The Strikethrough button will make the selected text appear with a line through it. e.g. Strikethrough
 
HTML:
<s>Strikethrough</s>
 

Subscript – New


Subscript button
 
The Subscript button will make the selected text appear at or below the baseline of text. Subscripts are best known for their use in formulas, mathematical expressions, and specifications of chemical compounds and isotopes, but have many other uses as well.
 
HTML:
H<sub>2</sub>O
 

Superscript – New


Superscript button
 
The Superscript button will make the selected text appear at or above the baseline of text. Superscripts are best known for their use in formulas, and mathematical expressions, but have many other uses as well.
 
HTML:
x<sup>2</sup>
 

Remove Format – New


Remove Format button
 
The Remove Format button will remove all previously applied formatting from the selected text. The text will revert to plain text. This button will remove bold, italic, underlines, subscript, superscript, and indents, and justification will be returned to “Left Align”. Quotes, horizontal lines, code snippets, lists and special symbols will remain.
 

Insert/Remove Numbered Lists – Updated

 
Numbered Lists button

The Insert/Remove Numbered Lists button will apply a sequential number to each new line of selected text. If the selected text is already numbered, the button will remove the numbering.  Use numbered lists when the order of the items should be followed in order or are ranked. By right-clicking a numbered list, you can update the type of numbering used (Upper Alpha, Lower Alpha, Upper Roman, and Lower Roman).
 
e.g.
1. First Item
2. Second item
3. Third Item
 
HTML:
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
 
For list using letters or Roman numerals:
<ol type="upper-alpha">
<ol type="lower-alpha">
<ol type="upper-roman">
<ol type="lower-roman">
 

Insert/Remove Bulleted Lists


Bulleted Lists button
 
The Insert/Remove Bulleted Lists button will apply a bullet to each new line of selected text. If the selected text is already bulleted, the button will remove the bullets.  Use bulleted lists when the order of the items does not matter.
 
e.g.
·         First Item
·         Second item
·         Third Item
 
HTML:
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
 
Previous Format:
[bullet]First Item[/bullet]
[bullet]Second Item[/bullet]
[bullet]Third Item[/bullet]
 

Decrease Indent/Insert Indent – Updated


Indent button
 
The Decrease and Increase Indent buttons will move the selected text to the left or right. This option can also be used on bulleted and numbered lists to create nested lists.
 
HTML:
<div class="indent">indent</div> Multiple Indents: <div class="indent-2">indent</div>

Previous Format:
[indent]indent[/indent]
 

Block Quote


Block Quote button
 
The Block Quote button will allow selected text to be styled as a quotation. Block quotations are used for the long quotation. We recommend using a block quotation when extracted text is 100 words or more, or at least eight lines.

HTML:
<blockquote>Here’s to the crazy ones — the misfits, the rebels…</blockquote>
 
Previous Format:
[quote] Here’s to the crazy ones — the misfits, the rebels…[/quote]
 

Justification Options – New


Justification button
 
The Left Align, Center, Right Align, and Justify buttons will  justify a block of text by adjusting the spaces between words to make a paragraph align perfectly with the margins on both sides of the page, the center of the page, or the full width of the page.
 
HTML:
Center: <div class="align-center">center</div>
Right Align: <div class="align-right">right align</div>
Justify: <div class="align-justify">justify</div>
 

Link and Unlink – Updated


Link/Unlink button

The Link and Unlink buttons are used to create and remove hyperlinks. If you have selected text before selecting “Link” the URL will be embedded in the text. You can also insert a link without pre-selecting text, to show the URL. You can use hyperlinks to link to other information on the Internet. Use the http:// prefix for most web pages, https:// when linking to secure pages, or ftp:// to link to a ftp server. e.g. Google
 
HTML:
<a href="http://www.google.com">Google</a>

Previous Format:
[url="http://www.google.com"]Google[/url]
 

Attach File


Attach File button
 
Use the attach file image to place an image or other type of file into your document. Selecting the button will bring up an interface to find the file on your current system. Once you have found and selected your file it will be uploaded and placed into your content. Please be aware that your file will be publicly available once your content has been posted and any files of a sensitive nature should not be used.
 

Insert Code Snippet


Code Snippet button
 
Using the insert Code Snippet button will open a dialog box to enter text styled as a code snippet. Code snippets use a “monospace” (or “fixed-width”) font that makes them easy to read: all characters are the same width, and we will use scrollbars to keep text in snippets from wrapping to new lines, so that it can easily be copied into an IDE.
 
HTML:
<pre>
<code> temp = x
x = y
y = temp</code>
</pre>
 
Previous Format:
[code]
temp = x
x = y
y = temp
[/code]
 

Insert Horizontal Line – New


Horizontal Line button
 
Use the insert Horizontal Line button to insert a line across the full width of your text.
 
HTML:
<hr>
 

Insert Special Symbol – New


Special Symbol button
 
Use the insert Special Symbol button to find symbols not easily created with your keyboard.
 

Formatting Styles – New


Formatting Styles button
 
The Formatting Styles dropdown will allow you to apply special formatting to the selected text. We provide options for headings at the secondary, third and fourth levels (the title of your article is automatically the first), and highlighting called “Marker”. Use this to introduce new sections of your document or to emphasize important information.
 
HTML:
Heading Level 2: <h2>Heading Level 2</h2>
Heading Level 3: <h3>Heading Level 2</h3>
Heading Level 4: <h4>Heading Level 2</h4>
Marker: <mark>Highlight</mark>
 

Show Blocks – New

 
Show Blocks button

The Show Blocks button will allow you to visualize all block level elements by surrounding them with a border and displaying their element name on the top-left.
 

About CKEditor


About CKEditor button
 
The About button will allow you to see the version of CKEditor currently being used by our site and learn more about the CKEditor product.
 

Contact Us

  • Call Us @ +1-877-211-8911 Telephone Support HoursMonday-Friday 6:00AM-12:00PM PT (UTC-8).

    Email is reviewed and responded to within 24 hours excluding weekends and holidays. We update our Support Center daily. Please come back often.