Page tree
Skip to end of metadata
Go to start of metadata

This document is for a previous release of cPanel & WHM. To view our latest documentation, visit our Home page.

For cPanel & WHM 11.44

(Home >> Files >> File Manager)

Overview

The HTML editor allows cPanel users to easily edit their HTML documents from the File Manager interface (Home >> Files >> File Manager). This visual HTML editor, sometimes called a WYSIWYG editor, brings powerful editing functions of familiar desktop editors, like Microsoft® Word, to the web.

Notes:

  • Due to customization, the screenshots in this guide may not match the HTML Editor interface that you see. See the table below for a full list of features that are available in the HTML editor.
  • This guide is intended for end-users who want a simple way to create or edit a web page. 
  • For more information, read the CKEditor User's Guide.

Toolbar

The editor includes a built-in toolbar with several different content tools you can use to edit content. The table below describes some of the important tools on the toolbar. For more information, read the CKEditor User's Guide.

FeatureIconDescription
SaveSaves the file to the server.
TemplatesStructures your document with pre-built forms. Each template includes elements such as page layout, text format, and style.
PrintPrints the file.
Paste tools
  • The first paste tool on the left allows you to paste your content and retains its format. 
  • The second paste tool allows you to paste your content as plain-text. 
  • Use the last paste tool to paste in your content from Microsoft Word. 
    • This tool will strip your content of code that can interfere with how your content displays. 
    • This will also remove most of the content's formatting. You will need use the editor tools to reformat the content.
Undo/RedoUse the arrows to undo and redo selections of text in your content. The arrow that points to the left will remove any content that you just added. The arrow that points to the right will redo actions that you just removed.
Find and ReplaceSearches the text for certain content. Use Replace to search for the content and then replace it with different content that you enter into the text box.
Select allSelects the whole document, which you can then cut, copy, or delete.
Form tool

Contains the form elements, which include check boxes, text boxes, selection fields, and buttons.

  • The form container must contain all of your form elements. 
  • Read the CKEditor User Guide to learn more about the form tool.

Forms can include the following elements: 

  •  — A check box allows you to select one or more items from a list within a form. 
  •  — A radio button allows you to select one item from a list within a form. 
  •  — A text box is a single-line field that allows you to enter text. 
  • — A text area is a scrollable, multiple-line field that allows you to enter text. 
  •  — A selection field is a scrollable list that allows you to select one or more options. 
  •  — A button allows the user to complete and submit the form. 

 

  •  — A hidden field is a field that the user cannot see but that is still submitted to the server when the form is complete.
Text toolsChanges the appearance of text with BoldItalic, and Underline options. Other options include Strikethrough, Subscript, and Superscript.
Remove Format toolRemoves the selected text format style, but maintains the text itself. If you copied your content in from an outside source and the format is inconsistent with the rest of your document, click this option to set the text back to the default style.
List toolsCreates an ordered (numbered) or unordered (bulleted) list in your content.
Indent toolsIncreases the left or right indentation for the selected paragraph.
Block quote toolCreates a block quote for the selected text. To learn more about this feature, read the CKEditor User Guide.
DIV< />Creates a div container around the selected text.
Alignment toolsFormats the selected text or images with the left align, center, right align, or fully justify options.
Link tools

Creates a link to a website or file in your content. If you added a link that you no longer need, highlight the link and use the broken link icon to remove it.
Anchor toolCreates anchors in your content to link to another section within your website.
Image toolAllows you to insert an image into your file. This also gives you the option to browse the server and select an image from the server and not on your local computer.
Insert toolsAdds tables, horizontal lines, page breaks, and other special characters to your content.
IFrame toolAllows you to include multi-media elements, like YouTube videos and Flash objects, in your document. To learn more about this feature, read the CKEditor User Guide.
Styles menuSets the style of font for the selected text.
Paragraph Format menuSets the paragraph style for the selected text.
Text direction toolsSet the direction of your text from left to right or from right to left.
Font menu

Sets the font option for the selected text.

Note:

We recommend that you use fonts that are considered global to all computers so the style you set will remain the same.

Size menuSets the font size for your text.
Color toolsSets the color of the text as well as the background color of your text.
MinimizeMinimizes the interface to fit smaller windows.
Show Blocks toolDisplays a grid that separates the block-level elements with HTML tags. To learn more about this feature, read the CKEditor User Guide.
< > SourceAllows you to access the source code for the content area.
AboutUse this tool to learn more about the File Browser on the CKEditor website.


Insert an image

To insert an image, perform the following steps:

  1. Click  in the toolbar. The editor will display the Image Properties window. The Image Properties window includes the following tabs:
    • Image Info (default) — Allows you to set the image URL and manipulate how it will display in the document.
    • Link — Allows you to create an image link, which can point to, for example, another web page or a document.
    • Upload — Allows you to store your images on the server, where you can retrieve them without your local computer.
    • Advanced — Allows you to configure image options (for example, ID assignments, classes, tooltips, or CSS properties).

      Note:

      This tab is meant for users who have HTML and CSS knowledge. 

  2. Confirm your options in the Preview window and click OK.

For more information about the Image Properties window, visit the CKEditor User's Guide.

HotLink Protection

If you enabled cPanel's HotLink Protection feature (Home >> Security >> Hotlink Protection) and your list of enabled hotlinks excludes your primary domain account, you may not see embedded images.

To view a list of domains for which you enabled hotlinks, navigate to the HotLink Protection interface (Home >> Security >> HotLink Protection). Add your primary account's URL to the URLs to allow access list. For example, if your primary domain is example.com, add http://cpanel.example.com/.


The File Browser

The Browse Server option directs you to the HTML editor's File Browser. You can use this to browse, upload, and manage images on the cPanel web server.

The File Browser interface is similar to other conventional file browsers that you find on your computer's operating system.

We have divided the interface into four sections: 

  1. Toolbar — A series of buttons that quickly execute specific file browser functions.
    •  — Move up or down levels of folders.
    •  — Get more information for the selected file.
  2. Folders pane — Organizes the folder hierarchy for easy navigation. Use the arrows to expand and collapse the different hierarchical levels.
  3. Files pane — Lists the files available in the selected folder.
  4. 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.

Get info

Select a folder and click to view information about that folder.

Note:

You can also right-click a folder and click Get info.