A text editor is any word processing program that you can use to type and edit text. You will enter content into a text editor for many of the CMS4Schools content tools. This article is going to go through all of the options provided by the text editor and best practices for copying, pasting, and formatting content.
Text Editor Options
Line 1
- Source (): Click on this button see the HTML view of your content. More advanced Website administrators can use this to work with the HTML code. Click this button again to exit the HTML view and see the regular text view.
- Check Accessibility (): Checks the accessibility of the text. Note that you can also use the Check Accessibility option at the page level to get a more comprehensive report of the accessibility of the page.
- Preview (): By clicking on this, this page will open in a new browser window
- Print (): This will print the contents entered in the editor
- Cut (): Cut the selected text. The keyboard shortcut is Ctrl-X
- Copy (): Copy the selected text. The keyboard shortcut is Ctrl-C
- Paste (): Use to Paste text. Using this tool is not recommended as best results are obtained when using the Paste as plain text clipboard
- Paste as plain text (): This is the recommended function for pasting. This paste function will remove all formatting and underlying coding. After pasting with this tool, use the formatting tools from this text editor to format the text in a web page friendly format
- Paste from Word (): Use this icon to paste text that is coming from Microsoft Word. Using this tool is not recommended as best results are obtained when using the Paste as plain text clipboard. There may still be underlying code from Microsoft that can distort a web page
- Undo (): Reverse the last action taken
- Redo (): Reverse an "undo"
- Find (): Use this to find a desired string of text
- Replace (): Use with the Find option to replace a text string with a new string of text
- Select All (): Use this to select all the text in the editor
- Spell Checker (): Check the spelling of the text inside the editor
Line 2
- Bold (): Use to bold the selected text
- Italic (): Use to italicize the selected text
- Underline (): Use to underline the selected text. We recommend avoiding underlining text as visitors may think an underline indicates a hyperlink.
- Strikethrough (): Use to strikethrough the selected text
- Subscript (): Use to create subscript
- Superscript (): Use to create superscript
- Remove Format (): Use to remove all formatting from selected text. We recommend using this tool if the text was pasted without using the paste as plain text function.
- Insert/Remove Numbered List (): Use to create/remove numbered lists. See the Numbered List Properties section on working with numbered lists
- Insert/Remove Bulleted List (): Use to create/remove a bulleted list. Right click with the cursor in an item in the list and select Bulleted List Properties and choose circle, disc or square for the type of bullet
- Decrease Indent (): Moves the cursor and/or text to the left.
- Increase Indent (): Use this to indent text. This can be used like the Tab key in a word processing program. Click more than once to increase the size of the indent. All of the text added following the increase indent will be indented at the same level until the decrease indent icon is used.
Note: If adding a quote, it's recommended to use the Block Quote option instead of increasing the indent. - Block Quote (): Use to create an indented block style quote.
- Create Div Container (): Some formatting settings can only be applied to block-level elements. Sometimes it is also useful to be able to format a larger document fragment that extends beyond one block. If this is the case, a standard practice is to add a div container around a document fragment.
Note: that using div containers, just like other HTML elements, along with CSS, is an advanced feature that should only be used if you have sufficient knowledge of both HTML and CSS web standards. - Align Left (): Aligns selected text on the left side.
- Center (): Centers selected text.
- Align Right (): Aligns selected text on the right. Not recommended to use this alignment.
- Justify (): Justifies the selected text. Not recommended to use this alignment.
- Link (): Select text and click the Link icon to link it to a URL or click the Link icon and key in or paste the URL to display the full URL within the text. See the Link section below for additional information.
- Unlink (): Select a link or linked text and click the Unlink icon to remove the hyperlink.
- Anchor (): An anchor can be created anywhere within the text at the cursor position, or selected text. Click on the Anchor icon and then enter the name of the anchor. The anchor is shown when text is edited and a link can be created to the anchor.
Line 3
- Image(): This icon can be used to insert an image into the text editor with or without additional text. The image needs to be uploaded to the File Uploads first, click the linked file name in the File Uploads and copy the URL of the image that opens in a browser window. See the Image Properties section below.
- Table (): Insert a table. To get back to the table properties right click in one of the table cells and select Table Properties. The right click will also give you the insert, delete and merge option for cells, rows, and columns. See the Table Properties section below for more details about inserting a table.
- Insert Horizontal Line (): Insert a horizontal line to use as a divider on a page. Never use a repeated line of hyphens or underscores to draw a dividing line. The horizontal line option will automatically resize to fit the width of the content. Drawing your own will often distort the page width.
- Smiley (): Inserts a smiley. There are many to choose from.
- Insert Special Character (): Insert a special character.
Line 4
- Formatting Styles (): Use to set different block styles
- Paragraph Format (): Use to set the paragraph/header format
- Font Name (): Use to change the font of the text. Limit the use of this as it will override any design setup for the website, and some fonts won’t work well with specific browsers or devices.
- Font Size (): Use to change the font size of the text. Limit the use of this as it will override any design setup for the website. This will break the responsive nature of the font size on the page and the text will display this size on every device.
- Text Color (): Choose a color from the color palette that opens. Limit the use of this as it will override any design setup for your website.
- Background Color (): The background color acts as a highlighter, and only the area behind and in line with the text is colored. Limit the use of this as it will override any design setup for your website.
Numbered List Properties
After inserting a number list, you can right-click on the list and select the “Numbered List Properties” option.
- Start: Allows you to set which number the list starts at.
- Type: Select the type of numbering for the list.
Link
Link Info Tab: Set the link type as URL, Anchor or Email. Choose the protocol from http://, https://, ftp://, news:// or other. Paste in the appropriate link/URL.
Target Tab: Choose the target. Choices are frame, popup window, New Window, Topmost Window, Same Window, or Parent Window. We recommend using New Window for any link that is leaving your site.
Image Properties
Image Info Tab: Paste in the URL obtained from File Uploads. The image will show in the Preview box. Alternative Text is for screen readers and doesn’t work with all browsers. Manage image sign and alignment here. See the File Uploads article for more information about adding an image to file uploads.
Link Tab: If you want the picture to be a hyperlink, key or paste in the URL the picture should link to and choose the appropriate target.
Table Properties
- Rows/Columns: Set the number of rows and columns desired for the table
- Header: Recommend to always have a header for accessibility purposes
- Width: Always set to a percent (recommend 100%) so the table will be responsive to the size of the device it is displaying on.
See the Table Tips article for more details/options about displaying a table on your site.
0 Comments