Overview

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

This guide is intended for end-users who want a simple way to create or edit a web page. For more information on the HTML editor, read the User's Guide.

  • note Note: Due to customization, the screenshots in this guide will not match the HTML editor. Likewise, some features in this guide were not implemented in the HTML editor. See the table below for a full list of features available in the HTML editor.

 

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. Read this section of the User's Guide to learn more about the toolbar.

 

FeatureIconDescription
Save
save.png
Saves the file to the server.
Templates
templates.png
Structures your document with pre-built forms. Each template includes elements such as page layout, text format, and style.
Print
print.png
Prints the file.
Paste tools
paste.png
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 is displayed. This will also remove most of the content's formatting, so you will need use the editor tools to reformat the content.
Undo/Redo
undo_redo.png
Use the arrows to undo and redo selections of text in your content. The arrow that points to the left will remove any content that was just added in. The arrow that points to the right will redo anything that was just removed.
Find and Replace
find_replace.png
Searches the text for certain content. You can also use Replace to search for the content and then replace it with different content you enter into the field.
Select all
select_all.png
Selects the whole document, which you can then cut, copy, or delete.
Form tool
form_icon.png
Contains the form elements, which include checkboxes, text fields, selection fields, and buttons. All form elements must be contained within the form container. Read the User's Guide to learn more about the form tool. The elements within a form include: 
checkbox.png — A checkbox allows you to select either one or more items from a list within a form. 
radio.png — A radio button allows you to select one item from a list within a form. 
text_field.png — A text field is a single-line field which allows you to enter text. 
textarea.png — A text area is a scrollable, multiple-line field which allows you to enter text. 
selection_field.png — A selection field is a scrollable list which allows you to select one or more options. 
button.png — A button allows the user to complete and submit the form. 
hidden_field.png — A hidden field is a field which the user cannot see but is still submitted to the server when the form is complete.
Text tools
font_style.png
Changes the appearance of text with BoldItalic, and Underline options. Other options include Strikethrough, Subscript, and Superscript (format2_icons.png).
Remove Format tool
remove_format.png
Removes 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 tools
list.png
Creates an ordered (numbered) or unordered (bulleted) list in your content.
Indent tools
align.png
Increases the left or right indentation for the selected paragraph.
Block quote tool
quote.png
Creates a block quote for the selected text. To learn more about this feature, read this section of the User's Guide.
DIV< />
div.png
Creates a div container around the selected text.
Alignment tools
paragraphs.png
Formats selected text or images with the left align, center, right align, or fully justify options.
Link tools
link.png
Creates a link to a website or file in your content. If you have added a link that you no longer need, you can highlight the link and use the broken link icon to remove it.
Anchor tool
anchor.png
Creates anchors in your content to link to another section within your website.
Image tool
image.png
Allows 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 tools
insert.png
Adds tables, horizontal lines, page breaks, and other special characters to your content.
IFrame tool
iframe.png
Allows you to include multi-media elements, like YouTube videos and Flash objects, in your document. To learn more about this feature, read the User's Guide.
Styles menu
styles.png
Sets the style of font for the selected text.
Paragraph Format menu
para_format.png
Sets the paragraph style for the selected text.
Text direction tools
text_direct.png
Set the direction of your text from left to right or from right to left.
Font menu
font.png
Sets the font option for the selected text. We recommend that you use fonts that are considered global to all computers so the style you set will remain the same.
Size menu
font_size.png
Sets the font size for your text.
Color tools
font_color.png
Sets the color of the text as well as the background color of your text.
Minimize
minimize.png
Minimizes the interface to fit smaller windows.
Show Blocks tool
show_blocks.png
Displays a grid that separates the block-level elements with HTML tags. To learn more about this feature, read the User's Guide.
< > Source
source.png
Allows you to access the source code for the content area.
About
about.png
Use this tool to learn more about the File Browser on the official website.

Insert an image

To insert an image:

  1. Click image.png from the toolbar. The editor will display the Image Properties window.
    • The Image Properties window includes three 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 another web page, a video, a PDF document, etc.
      • Upload — Allows you to store your images on the server, where they can be retrieved even without your local computer.
      • Advanced — Allows you to configure image options such as ID assignments, classes, tooltips, CSS properties, etc.
        • note Note: This tab is meant for users with HTML and CSS knowledge.
  2. Once you have confirmed your options in the Preview window, click OK.

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

 

HotLink Protection

If you have enabled cPanel's HotLink Protection feature and your primary domain account is excluded from your list of enabled hotlinks, you may not be able to see embedded images.

To view a list of domains for which you have enabled hotlinks, navigate to HotLink Protection (Home >> Security >> HotLink Protection). You will need to 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/.

For more information about how to manage hotlinks, read our HotLink Protection documentation.

The File Browser

When you click on each tab in the Image Properties window, you will find a Browse Server option, which directs you to the HTML editor's File Browser. Here, you can browse, upload, and manage images that are located on the cPanel web server.

The File Browser interface is similar to other conventional file browsers you find on your computer's operating system. We have divided the interface into five sections: 

elFinder.png 
The File Browser interface.

  1. Toolbar — A series of buttons that quickly execute specific file browser functions when clicked. Listed below are the buttons included in the toolbar and their functions.
    • arrows.png — Move up or down levels of folders.
    • info.png — 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 the selected file, the total number of files in the folder, etc.

 

Get info window

The Get info window lists the selected file’s size, path, link, etc. The window will appear when you select a folder and click info.png
note Note: You can also right-click a folder and click Get info

get_info.png 
The Get info interface.

Bu cevap yeterince yardımcı oldu mu?

İlgili diğer dökümanlar

Branding Editor
Overview This feature allows you to edit the header and footer images in each theme as well as...
Shortcuts
Shortcuts For cPanel version 11.40 (Home >> Preferences >> Shortcuts) This feature...
Getting Started Wizard
Language This feature defines the default display language of the cPanel interface. Contact your...
Advanced Guide to Branding
Overview This document provides helpful information for web hosts who wish to brand their users'...
Editing a Current Theme
Overview This document covers the process of editing a current theme with the Live Editor....