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.)

See Also

Using the TinyMCE® HTML Editor
Webster+

TinyMCE® is a registered trademark of Tiny Technologies Inc.