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

For cPanel & WHM version 58

(Home >> Files >> File Manager)

Warning:

This document describes functionality from cPanel's deprecated x3 theme. We strongly recommend that you use cPanel's current theme (Paper Lantern) instead.

  • We removed the deprecated x3 theme from new installations in cPanel & WHM version 60.
    • Make certain that you read the appropriate documentation for your version of cPanel & WHM.
    • For more information, read our What's My Version Number documentation.
  • cPanel's Paper Lantern theme does not include certain x3 theme-specific features.
    • For a complete list of Paper Lantern features, read our cPanel Features List documentation.
    • If you need a feature that the Paper Lantern theme does not include, submit a feature request.

Overview

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

Notes:

  • 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 HTML Editor interface's features.
  • The HTML Editor interface uses CKEditor functionality. For more information, read the CKEditor Users Guide.

Toolbar

The table below lists the tools that you can use when you edit a file in the HTML Editor interface:

ToolIconDescription
SaveSaves the file to the server.
TemplatesSelects a template to use to structure your document with pre-built forms. Each template includes elements such as page layout, text format, and style.
PrintPrints the file.
Undo/Redo

Undo or redo 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 and Replace

Search for and replace 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 allSelects the whole document, which you can then cut, copy, or delete.
Form tool

Insert one or more form elements (for example, checkboxes, text boxes, selection fields, or buttons). The form container must contain all of your form elements.

Forms can include the following elements: 

  •  — A checkbox allows users to select one or more items from a list within a form. 
  •  — A radio button allows users to select one item from a list within a form. 
  •  — A text box is a single-line field that allows users to enter text. 
  • — A text area is a scrollable, multiple-line field that allows users to enter text. 
  •  — A selection field is a scrollable list that allows users to select one or more options. 
  •  — A button allows users to submit a completed form. 
  •  — A hidden field is a field that users cannot see, but which the system submits to the server with the completed form.
Text tools

Changes the appearance of text with the following options:

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Subscript
  • Superscript
Remove Format toolRemoves 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 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.
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 toolInserts 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.
Insert toolsAdds tables, horizontal lines, page breaks, and other special characters to your content.
Embed Media Content from Various Sites toolInserts multi-media elements, such as YouTube videos and Flash objects, in your document.
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 global fonts, to ensure that the style that you set remains 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.
< > SourceDisplays the source code for the content area.
AboutDisplays information about the File Browser on the CKEditor website.


Insert an image

To insert an image, perform the following steps:

  1. Click the Image tool icon () in the toolbar. The editor displays the Image Properties window. The Image Properties window includes the following tabs:
    • Image Info (default) — Sets the image URL and manipulates how it displays in the document.
    • Link — Creates an image link, which can point to, for example, 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 options (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 options in the Preview window and click OK.

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

Note:

If you enabled cPanel's HotLink Protection - x3 feature (Home >> Security >> Hotlink Protection) 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 option directs you to the HTML Editor interface's File Browser feature. Use this feature to browse, upload, and manage images on the cPanel web server.

This interface includes the following sections: 

  • Toolbar — A series of buttons that quickly execute specific file browser functions.
    •  — Move up or down levels of folders.
    •  — 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.