The toolbar buttons may vary from the configuration of your LCMS installation. The image below represents the standard configuration for the HTML editor.
The bottom row buttons in the standard configuration, in order from left to right, are as follows:
• | Bold: Makes the selected text bold by using the <strong> HTML element, as if pressing CTRL+B in most browsers. Note: Technically, this marks up the text as "strong"; the bold styling is arbitrary, and could be rendered differently in different viewers. |
• | Italic: Makes the selected text italicized by using the <em> HTML element, as if pressing CTRL+I in most browsers. Note: Technically, this marks up the text as "emphasized"; the italicized styling is arbitrary, and could be rendered differently in different viewers. |
• | Underline: Makes the selected text underlined by using the <u> HTML element, as if pressing CTRL+U in most browsers. Note: Sometimes underlining can make the text appear like a hyperlink to users. |
• | Strike Through: Makes the selected text struck through by using the <s> HTML element. |
• | Subscript: Makes the selected text subscript by using the <sub> HTML element. |
• | Superscript: Makes the selected text superscript by using the <sup> HTML element. |
• | Text Color: Changes the selected text to the selected color by using the <span> HTML element. Note: Text colors may be restricted to predefined colors. |
• | Text Highlight: Highlights the selected text with the selected color by using the <span> HTML element. Note: Text highlight colors may be restricted to predefined colors. |
• | Remove Format: Using this button strips out most (but not all) formatting from the selected text. Similar to pasting content as plain text. |
• | Insert/Remove Numbered List: Adds or removes a numbered list, using the <ol> HTML element. |
• | Insert/Remove Bullet List: Adds or removes a bullet list, using the <ul> HTML element. Note: To change the colour of the bullet, right-click the list, open the Bulleted List Properties window, and enter the desired colour in the Color field. |
• | Decrease Indent: Decreases an indent by changing or removing the style HTML attribute and the margin-left CSS property. Note: Using this button inserts inline CSS code into the HTML, which can interfere with styles defined in the theme. |
• | Increase Indent: Increases an indent by changing or removing the style HTML attribute and the margin-left CSS property. Note: Using this button inserts inline CSS code into the HTML, which can interfere with styles defined in the theme. |
• | Block Quote: Inserts a block quote, using the <blockquote> HTML element. |
• | Align Left: Aligns the selected text to the left by using an HTML style attribute with the text-align: left rule. Note: This is sometimes avoided because it inserts inline CSS code into the HTML, which can interfere with styles defined in the theme. |
• | Centre: Aligns the selected text to the centre by using an HTML style attribute with the text-align: centre rule. Note: This inserts inline CSS code into the HTML, which can interfere with styles defined in the theme. |
• | Align Right: Aligns the selected text to the right by using an HTML style attribute with the text-align: right rule. Note: This inserts inline CSS code into the HTML, which can interfere with styles defined in the theme. |
• | Justify: Aligns the selected text with full justification by using an HTML style attribute with the text-align: justified rule. Note: This inserts inline CSS code into the HTML, which can interfere with styles defined in the theme. |
• | Transform Text to Uppercase: By using this button the selected text transforms to UPPERCASE. |
• | Transform Text to Lowercase: By using this button the selected text transforms to lowercase. |
• | Capitalize Text: By using this button the selected text transforms to title case (Capitalizes Each Word). |
• | Transform Text Switcher: By using this button change the selected text to either UPPERCASE or lowercase depending on the original format. |
• | Maximize: Increase the size of the HTML editor text area to fill most of the available screen space in the LCMS browser window by using this button. Note: This is a very useful feature if you are editing a large or complex screen. |
• | Show Blocks: By using this button, some HTML elements will be visible in the rich-text editor window by displaying a dotted border around them and the element name. Note: This can be a useful feature for spotting anomalies in the HTML, which would otherwise be invisible to the developer, and correcting them. |
• | About CKEditor: Display information about the HTML editor including the version number by using this button. |
|