Froala toolbar on Experts Exchange
The following is an explanation of each formatting option.
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
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
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
The Strikethrough button will make the selected text appear with a line through it. e.g.
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.
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.
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.
1. First Item
2. Second item
3. Third Item
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.
· First Item
· Second item
· Third Item
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.
<div class="indent">indent</div> Multiple Indents: <div class="indent-2">indent</div>
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.
<blockquote>Here’s to the crazy ones — the misfits, the rebels…</blockquote>
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.
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 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.
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 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
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 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
Insert Horizontal Line
Horizontal Line button
Use the insert Horizontal Line button to insert a line across the full width of your text.
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.
<code> temp = x
x = y
y = temp</code>
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
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.
Special Characters button
Use the insert Special Symbol button to find symbols not easily created with your keyboard.
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 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 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.