How to Use our Formatting Options in our Article Process

Last Updated: Mar 31, 2017 02:38PM PDT
Our articles process features a WYSIWYG editor, supported by Froala. 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.
 
Froala editor
Froala toolbar on Experts Exchange

The following is an explanation of each formatting option.
 

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>


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>


Underline

froala 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>


Strikethrough

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


Subscript

Froala subscript
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


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>


Insert/Remove Ordered (Numbered) Lists

 
Numbered Lists button


The Ordered List 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.
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>


Insert/Remove Unordered (Bulleted) Lists


Ordered List button
 

The Unordered List 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>


Decrease Indent/Increase Indent


Increase and Decrease 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>


Quote


Quote button
 
The Quote button will allow selected text to be styled as a quotation. Block quotations are used for the long quotations. 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>
 

Alignment Options


Align button
 
The Align button houses a Left Align, Center, Right Align, and Justify options to 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>
 

Paragraph Format


Paragraph Format interface

 
The Paragraph Format dropdown will allow you to apply heading formats 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). 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>

Paragraph Styles


Paragraph Styles interface


The Paragraph styles dropdown will allow you to apply additional styles to your selected text. Options include: grey, bordered, uppercase and spaced. Examples are shown below:


Paragraph style examples

HTML:
Gray: <p class="fr-text-gray">Gray</p><p class="fr-text-gray"></p>
Bordered: <p class="fr-text-bordered">Bordered</p>
Uppercase: <p class="fr-text-spaced fr-text-uppercase">Uppercase</p> 
Spaced: <p class="fr-text-spaced">Spaced</p>
 

Insert Link


Insert Link button

The Link button is used to create hyperlinks in your content. 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

Selecting text before pressing “Insert Link” the URL will be embedded in the text. You can also insert a link without pre-selecting text, to show the URL.

Once a link is created, placing your cursor in the link will give you additional options including: open link, adjust link properties, edit link, and unlink.


Link properties and unlink interface
 
HTML:
<a href="http://www.google.com">Google</a>

 

Insert Horizontal Line


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

Insert Code Snippet


Code Snippet button
 
Using the insert Code Snippet button will style the entered text 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>
 

Insert Image / File / Video

 
Insert Image button

Upload File button
 
Insert Video button


Several options are provided to insert an image or other type of file into your document. Selecting the insert image button will bring up an interface to drag and drop or browse for an image on your current system. Once you have found and selected your file it will be uploaded and placed into your content. Upload file will create an attachment to your content with a link to the file. This can be used when you do not wish to embed an image in your document. Finally, insert video should be used when you wish to embed a video in 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.

Additional image properties can be applied by selecting your image and using the menu shown. Options include replacing the image, alignment, remove the image, insert a link, define inline or wordbreak display, add additional styles, e.g., borders, define alt text, or change size:


Image properties menu

Insert Tables


Table Interface

The Insert Table button will trigger a dropdown which allows you to define the number of rows and columns you need in your table. Once selected the table cells are inserted into your content.

HTML:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

 

Special Characters


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

Clear Formatting 

froala clear format
Clear Formatting button
 
The Clear Formatting 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.
 

Undo/Redo


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+Shift + Z will “Redo” your most recent changes.

 

Code View


Code View button

The Code View button will initiate a dialog that allows you to modify the editor output in the HTML format. All HTML listed in the following text is supported. If using HTML outside of the supported list, there is a chance the formatting will be removed on article submission for security reasons. If you use unsupported HTML that is removed, you may reach out to Customer Support to have the formatting added to our supported list.

The code view option should only be used by those familiar with HTML. 

 

Contact Us

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

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