The HTML editor is available in several places throughout Method, and is used to add formatting to your text. The editor works basically the same way as a word processor like Microsoft Word.
NOTE: If you want to learn more about how to use the HTML Editor in your customizations, see the article HTML Editor Object.
Even though the controls available to you in the editor are pretty commonplace, this section will go through the options provided to give you a "crash course" in text editing.
There are four menu sections in the HTML editor:
The arrows allow you undo and redo changes made to the document.
NOTE: Depending on the width of the HTML editor, you may see more icons, as opposed to them being grouped into their sections.
We will go through each section individually, with a screen shot for reference. We will describe each icon from left to right.
In addition to these sections, you can add other elements to the editor (for example an image), and each of these controls will have their own menu options:
These, too, will be covered below.
Text Controls
Bold (
CTRL+B): Bolds selected text.Italic (
CTRL+I): Italicizes selected text.Underline (
CTRL+U): Underlines selected text.Font: Select a font from the dropdown.
Size: Select a font size from the dropdown.
Color: Change the color for the text
Background Color: Change the color for the background of the text.
Paragraph Controls
Numbered list: Create a numbered list and choose the formatting and ordering of the numbers.
Bullet list: Create a bulleted list and choose the formatting of the bullets.
Align left: Align the text along the left margin.
Align center: Align the text in the center of the editor
Align right: Align the text along the right margin.
Align justify: Have the text fully span the document.
Decrease indent: Indent a paragraph further left.
Increase indent: Indent a paragraph further right.
Line height: Set the spacing between the lines of text.
Rich Controls
Insert image (
CTRL+P): Embed an image into the text. You can either link to an existing image on the web, or drag and drop an image from your computer. See Image controls to view other configurable options for the image.Insert table: Embed a table into your text. See Table controls to view other configurable options for the table.
Insert hyperlink (
CTRL+K): Create a web link for the text. See Hyperlink controls to view other configurable options for the link.Insert video: Insert a video into your text either by URL link, embed code, or uploading. See Video controls to see other configurable options for the video.
Insert horizontal line: Add a grey separator line.
Misc Controls
Clear formatting: Insert or edit a hyperlink to an external website.
Code view: This function calls up the HTML source code of the text for those who wish to code directly or make changes to the HTML.
Fullscreen: Expands the editor so you can edit using the entire space of the browser window.
Print: Print the text
Select All (
CTRL+A): Select everything within the editor.
Image Controls
If you embed an image and select it, a menu pops up with further options to configure your image.
Replace: Replace image file.
Align: Align the image to the left, have no alignment, or align right.
Image caption: Add a text caption at the bottom of the image.
Remove: Delete the image.
Insert link: Add a hyperlink to the image.
Display: Position the image inline (within the text) or break text
Style: Add styling to image — rounded, bordered, shadow.
Alternative text: Alternative text in case image fails to load.
Change size: Change the width and height of the image.
Table Controls
If you insert a table and select a cell, a menu pops up with further options to configure your table.
The first row of icons deal with the table:
Table header: Add a styled first row to use as the header.
Remove table: Delete the table.
Insert or delete a row: Insert a row either above or below the current selected row. You can also delete the row.
Insert or delete a column: Insert a column either to the left or right of the current selected column. You can also delete the column.
Style table: Set dashed borders and alternating colours on rows.
The second row of icons affect the selected cell.
Split and merge cells: Split a cell vertically or horizontally, or merge two cells together.
Colour cell: Change the background color for the cell.
Vertical alignment: Align the text in a cell to the top, middle, or bottom.
Horizontal alignment: Align the text in a cell to the left, center, middle, or full justification.
Cell Style: Highlight the cell borders red, as well as make the cell borders thicker.
Hyperlink Controls
If you add a hyperlink to text, a menu pops up with further options to configure it.
Open link: Test the link by opening it in a new tab.
Style link: You can make the link green or thick.
Edit link: Change the text, url link, and whether or not it opens up in a new tab.
Remove link: remove the hyperlink.
Video Controls
A video can be inserted by its URL link, embed code provided by the host, or uploading. If you embed a video and select it, a menu pops up with further options to configure your video.
Replace: Replace video file.
Remove: Delete the video.
Display: Position the video inline (within the text) or break text
Align: Align the video to the left, have no alignment, or align right.
Image caption: Add a text caption at the bottom of the image.
Change size: Change the width and height of the image.