#

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.