Using The HTML Editor Interface in cPanel

cPanel - Files - HTML Editor

What is HTML

HTML or HyperText Markup Language is a computer programming language designed for creating websites that can be accessed by anyone on the World Wide Web. It is relatively easy to learn and highly effective for website development. Web pages built with HTML are typically viewed in a web browser and can include text, links, images, and even audio and video. HTML is used to define and structure these elements, ensuring that the web browser displays them properly

Due to different cPanel versions or 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
	Save	Saves the file to the server.
	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.
	Print	Prints the file.
	Pastes Tools	Pastes text from a file, paste text as plain text, or pastes text from a Word document.
	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.
	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.
	Select All	Selects the whole document, which you can then cut, copy, or delete.
	Form	Inserts a form container into your document. A form container must contain each of your form elements.
	Text Tools	Changes the appearance of text to Bold, Italic, Underline, Strikethrough, Subscript, or Superscript.
	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.
	Numbered/Bulleted List	Creates an ordered (numbered) or unordered (bulleted) list in your content.
	Decrease/Increase Indent	Modifies the left or right indentation for the selected paragraph.
	Block Quote	Creates a block quote for the selected text.
	Create Div Container	Creates a div container around the selected text.
	Align	Formats the selected text or images with the Align Left, Center, Align Right, or Justify settings.
	Text Direction	Sets the direction of the selected paragraph(s) from left to right or from right to left.
	Link/Unlink	Creates a link to a website or file in your content, or removes an existing link.
	Anchor	Creates an anchor in your content to link to another section on the same page.
	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.
	Embed Media from External Sites	Inserts multi-media elements, such as YouTube™ videos, in your document.
	Insert	Adds tables, horizontal lines, page breaks, and other special characters to your content.
	Formatting Styles menu	Sets the style of font for the selected text.
	Paragraph Format menu	Sets the paragraph style for the selected text.
	Font Name menu	Sets the font setting for the selected text. We recommend that you use global fonts, to ensure that the style that you set remains the same.
	Font Size menu	Sets the font size of the selected text.
	Color	Sets the text and background colors of the selected text.
	Show Blocks	Displays a grid that separates the block-level elements with HTML tags.
	Source	Displays the source code for the content area.
	Preview	Displays a preview of the content area.
	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
	Checkbox	Allows users to select one or more items from a list within a form.
	Radio Button	Allows users to select one item from a list within a form.
	Text Field	A single-line field that allows users to enter text.
	Textarea	A scrollable, multiple line field that allows users to enter text.
	Selection Field	A scrollable list that allows users to select one or more settings.
	Button	Allows users to submit a completed form.
	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:

Click the Image icon in the toolbar. The editor displays the Image Properties interface. The Image Properties interface includes the following tabs:

Confirm your settings in the Preview interface and click OK.

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.

Discover our WHMCS cPanel Knowledgebase add-on module