HTML Editor

Valid for versions 82 through the latest version

Version:

82

Last modified: May 28, 2024


Looking for this interface?
Note:

Your hosting provider can enable or disable this interface in WHM's Feature Manager interface (WHM >> Home >> Packages >> Feature Manager).

Overview

The HTML Editor interface allows you to easily edit your HTML documents from the File Manager interface (cPanel » Home » Files » File Manager). This visual (WYSIWYG) HTML editor includes powerful editing functions of familiar desktop editors (for example, Microsoft® Word).

Note:
  • Due to customization, the screenshots in this guide may not match the HTML Editor interface that you see. The table below lists all of the interface’s features.
  • The HTML Editor interface uses CKEditor functionality. For more information, read the CKEditor Users Guide.

Toolbar

The HTML Editor interface offers the following tools that help you to edit your HTML files:

Icon Tool Description
HTML Editor Save Save Saves the file to the server.
HTML Editor Templates Templates Selects a template to use to structure your document with pre-built forms. Each template includes elements such as page layout, text format, and style.
HTML Editor Print Print Prints the file.
HTML Editor Paste Pastes Tools Pastes text from a file, paste text as plain text, or pastes text from a Word document.
HTML Editor Undo Redo Undo/Redo Undoes or redoes selections of text in your content. Click the left arrow to undo your most recent actions. Click the right arrow to repeat actions that you just undid.
HTML Editor Find and Replace Find/Replace Searches for and replaces selections of text in your content. Click the Find icon to search the text for certain content. Click the Replace icon to search for the content and then replace it with different content that you enter in the text box.
HTML Editor Select All Select All Selects the whole document, which you can then cut, copy, or delete.
HTML Editor Form Tool Form Inserts a form container into your document. A form container must contain each of your form elements.
HTML Editor Text Tools Text Tools Changes the appearance of text to Bold, Italic, Underline, Strikethrough, Subscript, or Superscript.
HTML Editor Remove Format Remove Format Removes the selected text’s formatting, but maintains the text itself. If you copied your content from an outside source and the format is inconsistent with the rest of your document, click this setting to set the text back to the default style.
HTML Editor List Tools Numbered/Bulleted List Creates an ordered (numbered) or unordered (bulleted) list in your content.
HTML Editor Indent Tools Decrease/Increase Indent Modifies the left or right indentation for the selected paragraph.
HTML Editor Block Quote Block Quote Creates a block quote for the selected text.
HTML Editor Div Create Div Container Creates a div container around the selected text.
HTML Editor Alignment Tools Align Formats the selected text or images with the Align Left, Center, Align Right, or Justify settings.
HTML Editor Text Direction Text Direction Sets the direction of the selected paragraph(s) from left to right or from right to left.
HTML Editor Link Tools Link/Unlink Creates a link to a website or file in your content, or removes an existing link.
HTML Editor Anchor Tools Anchor Creates an anchor in your content to link to another section on the same page.
HTML Editor Image Tool Image Inserts an image into your file. When you use this tool, you can also browse the server and select an image from it rather than your local computer.
HTML Editor Embed Media Embed Media from External Sites Inserts multi-media elements, such as YouTube™ videos, in your document.
HTML Editor Insert Tools Insert Adds tables, horizontal lines, page breaks, and other special characters to your content.
HTML Editor Styles Formatting Styles menu Sets the style of font for the selected text.
HTML Editor Format Paragraph Format menu Sets the paragraph style for the selected text.
HTML Editor Font Font Name menu Sets the font setting for the selected text.
Note:
We recommend that you use global fonts, to ensure that the style that you set remains the same.
HTML Editor Size Font Size menu Sets the font size of the selected text.
HTML Editor Color Tools Color Sets the text and background colors of the selected text.
HTML Editor Show Blocks Tool Show Blocks Displays a grid that separates the block-level elements with HTML tags.
HTML Editor Source Source Displays the source code for the content area.
HTML Editor Source Preview Displays a preview of the content area.
HTML Editor About About Displays version and licensing information about CKEditor.

Form Elements

A form container must contain each of your form elements. Forms can include the following elements:

Icon Tool Description
HTML Editor Checkbox Checkbox Allows users to select one or more items from a list within a form.
HTML Editor Radio Radio Button Allows users to select one item from a list within a form.
HTML Editor Text Text Field A single-line field that allows users to enter text.
HTML Editor Text Area Textarea A scrollable, multiple line field that allows users to enter text.
HTML Editor Selection Selection Field A scrollable list that allows users to select one or more settings.
HTML Editor button Button Allows users to submit a completed form.
HTML Editor Hidden Hidden Field A field that users cannot see, but which the system submits to the server with the completed form.

Insert an image

To insert an image, perform the following steps:

  1. HTML Editor Image Tool — Click the Image icon in the toolbar. The editor displays the Image Properties interface. The Image Properties interface includes the following tabs:
    Tab Description
    Image Info Sets the image URL and manipulates how it displays in the document.
    Link Creates an image link, which can point to another web page or a document.
    Upload Stores your images on the server, where you can retrieve them without your local computer.
    Advanced Configures image settings (for example, ID assignments, classes, tooltips, or CSS properties).
    Note:
    You should only use the Advanced tab if you understand HTML and CSS.
  2. Confirm your settings in the Preview interface and click OK.

For more information about the Image Properties interface, read the CKEditor Users Guide.

Note:

If you enabled the Hotlink Protection feature and your list of enabled hotlinks excludes your primary domain account, you may not see embedded images. Add your primary domain to the URLs to allow access list to fix this problem.

File Browser

The Browse Server button on the Image Info tab directs you to the interface’s File Browser section. Use this section to browse, upload, and manage images on your cPanel account.

This interface includes the following sections:

  • Toolbar — A series of buttons that quickly execute specific file browser functions.
    • HTML Editor Arrows — Move up or down levels of folders.
    • HTML Editor Info — View more information for the selected file.
  • Folders pane — Organizes the folder hierarchy for easy navigation. Use the arrows to expand and collapse the different hierarchical levels.
  • Files pane — Lists the files available in the selected folder.
  • Status bar — The section at the bottom of the interface that displays information about, for example, the selected file or the total number of files in the folder.

Additional Documentation