HTML Editor

HTML Editor

The HTML Editor is used to create and edit HTML pages without requiring any HTML knowledge. Pre-defined tool bars provide the necessary editing tools for creating and formatting an HTML page. Position the mouse pointer over each tool bar button to display a tooltip with the button's function.

To invoke the HTML Editor, use one of the following methods:

Location	Method
From the PxPlus IDE Main Launcher	Select HTML Editor (near the bottom of the tree view).
From the PxPlus Web IDE	Select HTML Editor from the Web header menu bar.

The HTML Editor is displayed with a pre-defined layout, which can be modified if needed. See Using the TinyMCE® HTML Editor.

Note:
JavaScript elements and properties are no longer stripped out, thus allowing them to be edited.

(Support to allow editing of HTML with JavaScript was added in PxPlus 2021 Update 2.)

File and Projects Menus

This table describes the options for the File and Projects menus (in the upper left corner):

File	Lists HTML file options.
Open	Loads an existing HTML file.
Save	Writes the current HTML file, and if it is a new file, another window will launch for entering a file name. Note: If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN. (Support for updating SVN when saving an HTML file was added in PxPlus 2021.)
Save As	Launches another window for entering the file name to be written.
New Page	Loads a blank page.
Save Full page	A check mark beside this option indicates that when Save (or Save As) is selected, the current HTML file will be written with all of its elements. By default, this option is On (checked). Click this option to uncheck it. A warning message will ask to confirm this change before proceeding. (The warning message was added in PxPlus 2023.)
Webster Preview URL	Launches another window for specifying the URL to be used to run the Webster+ bind needed to see the preview. (The Webster Preview URL option was added in PxPlus 2021.)
Recent Files	Displays a list of recently opened HTML files. (The Recent Files list was added in PxPlus 2021.)
Exit	Closes HTML Editor. Any changes to the current HTML file are *not* automatically saved. To save changes prior to exiting, select Save or Save As on the File menu (in the upper left corner).
Projects	Lists options for creating a new project and adding an HTML file to a project. (The Projects menu was added in PxPlus 2021.)
Create New Project	Launches the Create Project dialog for entering a new project for the current working directory. Click the Query button to select a different working directory.
Add to Project	Launches the Add to Project dialog for adding the current HTML file to an existing project that is selected from the Project drop box.

Menu Bar Options

This table describes the menu bar options in the order of appearance. Some options may also be invoked using tool bar buttons or keyboard shortcuts. For a list of keyboard shortcuts, click the Help menu or the Help tool bar button.

Document

Lists options for printing the document and entering the different settings for the document, such as title, metadata, etc.

Print

Prints the current HTML document.

Metadata and document properties

Launches a separate window for entering document information (i.e. title, description, author, etc.).

If the Save Full page option is Off (unchecked), any changes to metadata will not be saved.

Word count

Displays the word and character count for the current HTML document and/or any selected text.

Edit

Lists options for creating and editing an HTML document.

Undo

Reverses a change. Same as the Undo tool bar button.

Redo

Sequentially reapplies the last changes that were undone by the Undo option until a new change is made. After a new change, Redo will recall only changes that were "undone" after the newest change. Same as the Redo tool bar button.

Cut

Cuts selected text.

Copy

Copies selected text.

Paste

Pastes cut or copied contents.

Note:
If the browser does not support direct access to the Clipboard, a message will suggest using the keyboard shortcuts instead: Ctrl X (Cut), Ctrl C (Copy) or Ctrl V (Paste).

Paste as text

If selected (as indicated by a check mark), any text that was copied with predefined formatting will be pasted as plain text with no formatting.

By default, this option is Off (unchecked), indicating that the copied text will be pasted with its formatting intact, if applicable.

Select all

Highlights the contents of the current HTML document.

Find and replace

Launches a separate window for entering the search text and the replacement value for specific or all occurrences of that text. Click the Gear drop-down button for more search options:

Match case	Indicates that the search is case sensitive.
Find whole words only	Searches for the specified text value as a whole word only rather than as part of another word.
Find in selection	Limits the search to a pre-selected portion of the document.

A check mark displays beside the option when it is selected. Click the option to uncheck it.

Insert

Lists options for inserting additional elements (i.e. link, image, media, etc.) into an HTML document.

Link

Launches a separate window for inserting a new link or editing the settings for an existing link in the current HTML document.

Remove link

Removes an existing link from the selected text.

Image

Launches a separate window for inserting a new image or editing the settings for an existing image in the current HTML document.

Media

Launches a separate window for inserting a new video or editing the settings for an existing video in the current HTML document.

Special character

Launches a separate window with special characters to select.

Date/time

Presents date/time formatting options:

   hh:mm:ss
   yyyy-mm-dd
   hh:mm:ss AM/PM
   mm/dd/yyyy

Emoticons

Launches a separate window with emoticons to select.

Horizontal line

Inserts a horizontal line at the cursor position.

Nonbreaking space

Inserts a nonbreaking space at the cursor position.

Page break

Inserts a page break at the cursor position.

Anchor

Launches a separate window for entering a name for the anchor (bookmark) to be inserted at the cursor position.

Webster Shortcodes

Presents a list of Webster+ Short Codes that can be inserted into an HTML document.

(The Webster Shortcodes option was added in PxPlus 2021.)

View

Lists options for showing hidden elements and previewing an HTML document.

Visual aids

If selected (as indicated by a check mark), a dotted outline will display for a borderless table (i.e. the table's Border Width property is 0). The dotted outline provides a visual cue only and does not display when the document is printed or previewed. By default, this option is On (checked).

Show invisible characters

If selected (as indicated by a check mark), formatting symbols, which are normally hidden, will be visible. By default, this option is Off (unchecked).

Show blocks

If selected (as indicated by a check mark), a dotted outline will surround each paragraph block as a visual cue. By default, this option is Off (unchecked).

Preview

Presents a preview of the current HTML document.

Webster Preview

Opens a browser window for displaying the Webster+ preview. If the Webster Preview URL has not been defined, a message will display.

(The Webster Preview option was added in PxPlus 2021.)

Format

Lists options for formatting the content of an HTML document.

Bold

Text will be bolded. Same as Bold tool bar button.

Italic

Text will be in italics. Same as Italic tool bar button.

Underline

Text will be underlined. Same as Underline tool bar button.

Strikethrough

Text will show strikethrough.

Superscript

Text will be in superscript.

Subscript

Text will be in subscript.

Bullet list

Creates a new bulleted list at the cursor position or changes selected text into a bullet list format. Same as Bullet list tool bar button.

Numbered list

Creates a new numbered list at the cursor position or changes selected text into a numbered list format. Same as Numbered list tool bar button.

Decrease indent

Decreases indentation (shifts text to the left). Same as Decrease indent tool bar button.

Increase indent

Increases indentation (shifts text to the right). Same as Increase indent tool bar button.

Formats

The content formatting options are:

Headings	Options are Heading styles 1 to 6 (differ according to font size).
Inline	Options are Bold, Italic, Underline, Strikethrough, Superscript, Subscript and Code.
Blocks	Options are Paragraph, Blockquote, Div and Pre.
Align	Options are Left, Center, Right and Justify.

Clear formatting

Removes formatting from selected text.

Table

Lists options for creating, editing and deleting a table within an HTML document.

Table

Displays a 2D grid for selecting the number of rows and columns desired for the new table.

Table properties

Displays a separate window for editing the properties (i.e. width/height, cell spacing, etc.) for an existing table.

Delete table

Removes a selected table.

Cell

(Available when cursor is positioned inside a table)

The cell options are:

Cell properties	Launches a separate window with options for setting cell properties.
Merge cells	*(Available when two or more cells are selected)* Joins the selected cells into a single cell.
Split cell	*(Available when cursor is on merged cell)* Splits the merged cell into smaller individual cells.

Row

(Available when cursor is positioned inside a table)

The row options are:

Insert row before	Inserts a blank row above the current row.
Insert row after	Inserts a blank row below the current row.
Delete row	Deletes the current row.
Row properties	Launches a separate window with options for setting row properties.
Cut row	Removes the current row for subsequent pasting to a specified location.
Copy row	Copies the current row for subsequent pasting to a specified location.
Paste row before	Inserts a copied or cut row above the current row.
Paste row after	Inserts a copied or cut row below the current row.

Column

(Available when cursor is positioned inside a table)

The column options are:

Insert column before	Inserts a blank column to the left of the current column.
Insert column after	Inserts a blank column to the right of the current column.
Delete column	Deletes the current column.
Cut column	Removes the current column for subsequent pasting to a specified location.
Copy column	Copies the current column for subsequent pasting to a specified location.
Paste column before	Inserts a copied or cut column to the left of the current column.
Paste column after	Inserts a copied or cut column to the right of the current column.

Help

TinyMCE® Help information.

Help

Provides the following information (same as the Help tool bar button):

• Keyboard shortcuts

• Keyboard navigation

• List of installed TinyMCE® plugins (Click on a link to display TinyMCE® help for the selected plugin)

• List of additional TinyMCE® plugins that can be installed

• TinyMCE® version

Tool Bar Options

The tool bar options provide convenient access to many of the functions that are also available as Menu Bar Options.

Tool Bar Button	Description
Open	Loads an existing HTML file. (The Open tool bar option was added in PxPlus 2023.)
Save	Writes the current HTML file, and if it is a new file, another window will launch for entering a file name. Note: If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN. (The Save tool bar option was added in PxPlus 2023.)
New Page	Loads a blank page. (The New Page tool bar option was added in PxPlus 2023.)
Undo	Reverses a change. Also available on the Edit menu.
Redo	Sequentially reapplies the last changes that were undone by the Undo option until a new change is made. After a new change, Redo will recall only changes that were "undone" after the newest change. Also available on the Edit menu.
Paragraph	Lists options for formatting the content of an HTML document. See Formats option on the Format menu.
System Font	Font types. If a font other than the system font is used, a check mark will display beside the selected font in the list.
Font size	Font sizes. A check mark displays beside the selected font size. Default font size is 12 point.
Bold	Text will be bolded. Also available on the Format menu.
Italic	Text will be in italic. Also available on the Format menu.
Underline	Text will be underlined. Also available on the Format menu.
Text color	Click the drop-down to choose a text color from the color selection grid.
Background color	Click the drop-down to choose a background color from the color selection grid.
Align Left Align Center Align Right	Text alignment.
Bullet list	Creates a new bulleted list at the cursor position or changes selected text into a bullet list format. Also available on the Format menu.
Numbered list	Creates a new numbered list at the cursor position or changes selected text into a numbered list format. Also available on the Format menu.
Decrease Indent	Decreases indentation (shifts text to the left). Also available on the Format menu.
Increase Indent	Increases indentation (shifts text to the right). Also available on the Format menu.
Source code	Launches a separate window that shows the HTML formatting codes in the current HTML document. If the Save Full page option is Off (unchecked), any changes outside the <body> tag will not be saved.
Help	TinyMCE® Help information.
Webster Shortcodes	Presents a list of Webster+ Short Codes that can be inserted into an HTML document. Also available on the Insert menu. (The Webster Shortcodes tool bar option was added in PxPlus 2021.)
Webster Preview	Opens a browser window for displaying the Webster+ preview. Also available on the View menu. If the Webster Preview URL has not been defined, a message will display. (The Webster Preview tool bar option was added in PxPlus 2021.)

Note:
JavaScript elements and properties are no longer stripped out, thus allowing them to be edited.

(Support to allow editing of HTML with JavaScript was added in PxPlus 2021 Update 2.)

File and Projects Menus

Note:
If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN.

(Support for updating SVN when saving an HTML file was added in PxPlus 2021.)

Menu Bar Options

Note:
If the browser does not support direct access to the Clipboard, a message will suggest using the keyboard shortcuts instead: Ctrl X (Cut), Ctrl C (Copy) or Ctrl V (Paste).

Tool Bar Options

Note:
If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN.

See Also

Note:JavaScript elements and properties are no longer stripped out, thus allowing them to be edited.(Support to allow editing of HTML with JavaScript was added in PxPlus 2021 Update 2.)

File and Projects Menus

Note: If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN.(Support for updating SVN when saving an HTML file was added in PxPlus 2021.)

Menu Bar Options

Note: If the browser does not support direct access to the Clipboard, a message will suggest using the keyboard shortcuts instead: Ctrl X (Cut), Ctrl C (Copy) or Ctrl V (Paste).

Tool Bar Options

Note: If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN.

See Also

Note:
JavaScript elements and properties are no longer stripped out, thus allowing them to be edited.

(Support to allow editing of HTML with JavaScript was added in PxPlus 2021 Update 2.)

Note:
If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN.

(Support for updating SVN when saving an HTML file was added in PxPlus 2021.)

Note:
If the browser does not support direct access to the Clipboard, a message will suggest using the keyboard shortcuts instead: Ctrl X (Cut), Ctrl C (Copy) or Ctrl V (Paste).

Note:
If saving an HTML file that is in a source SVN directory, the file in SVN will also be updated. See PxPlus Version Control System Using TortoiseSVN.