Visual Html editing of the Body content

Help Builder allows you to edit the body content of your topic visually using a rich HTML Edit control. To enter this mode click on the on the Edit icon just above the big Body content field.

Visual editing is supported only for the body field as it's typically the primary field used for entering stylized topic information either for class or code documentation, or as the only input field for pure end user documentation. The image below demonstrates this feature in action allowing you to edit the body text for the topic in place in full WYSIWYG mode.

In this mode you can simply edit text and see immediately what it looks like. Help Builder injects your text into the default templates header, so you see the text formatted with the proper style information.

Although Help Builder cannot return to the default 'formatted' text format you can always view the underlying HTML of the body field by unchecking the HTML Edit button above the body field. HTML view is plain HTML view, so you see all markup. Help Builder will try to highlight the HTML text matching the last selection point in the HTML view to make finding your place easy. Help Builder can also edit the raw HTML in a configured external Html editor of your choice.

Edit Toolbar Interaction

While in HTML Edit mode Help Builder's Menu operation is slightly different due to the interaction of the edit control

with Help Builder's UI. This integration is not quite as seamless as for standard editing, and specifically most of the hotkeys for the toolbar and edit menu options will not work from within the HTML Editor. The Word spell checking also can not be performed in visual mode - to spell check you have to drop into HTML Source view and then check against the HTML document.

Custom ShortCut Menus

The HTML Edit view also provides a number of shortcut menus that are different from the standard edit menu that pops up in text mode. These shortcuts deal with object selections and unique issues for editing text inside of the HTML editor.

Table Editing
While inside of Help Builder you can create tables with the Table Editing Toolbar option. Once the table is in the document you can manipulate it through the shortcut menu:

Inside of a cell you can use the ShortCut menu to insert and delete rows as well as bring up the Table configuration dialog that allows you to configure a specific cell or the table as a whole:

You can also tab through cells and if you tab out of the last cell Help Builder automatically inserts a new row with the same formatting as the previous cell.

HyperLinks
Hyperlinks and bookmarks can be embedded into the document using the standard Help Builder Toolbar. The links get directly embedded into the visual content. To edit an existing link, right click and select 'Edit Hyperlink'. If the link is a hyper link the standard hyperlink dialog pops up, if it's link to another topic the Topic Bookmark Link dialog pops up.

Pasting into the document
The HTML Edit control is basically a rich edit control and it can accept many types of input directly via drag and drop or pasting. For example, in many cases you can cut and paste text of a Web page directly off a Web page and paste it into the visual Edit form maintaining the formatting.

There are 3 Paste modes available from the Shortcut menu:

• Paste
  This is the default paste operation. This converts incoming text to HTML and tries to maintain the formatting.

• Paste Code or Formatted Text
  Use this option to paste code or HTML/XML that you want to display as text. This brings up the formatted code dialog used in the non-visual editor. Note that this option picks up the code as text and then formats it using the built in parsers.

• Paste and maintain Formatting
  This option takes the incoming clipboard data as text and tries to maintain the formatting by HTML Encoding the content. This works best for text that is not code or other 'formatted text' but still contains special spacing and indentations.
  

Text Operations
There are a also a few text operations that are useful. You can unformat a block of text which will remove the outermost HTML tag of the selected text. Note that this behavior may vary depending on which type of element your text is sitting in.

Ctrl-Z works to undo changes. To Redo use the text shortcut menu.

Editing in an external Html Editor

Because content edited is actually raw HTML you can also load the content from the topic into any HTML editor. Help Builder lets you configure an Html Template editor in the Options. For example you can configure Microsoft Web Expression or HomeSite or some other Html editor as the EXE that is launched for HTML editing.

Once an editor is configured you can automatically cause this Html Editor to fire up by clicking on the Html Editor icon on the very right of the toolbar while editing in HTML mode. When you select this button Help Builder starts the configured Html Editor and loads the current topic's content into it. You can then edit the raw HTML content in this editor. For example, if you use Web Expression you can visual edit the content and get spell checking support, and all the formatting features of Expression Web.

When you are done with the edit simply save the changes to disk (Ctrl-S typically) then close the editor. Help Builder will then re-activate and pick up the saved file data from disk.

This process is not super smooth - it's basically a simple file monitoring mechanism that lets you run any application and wait for it to close down at which point the changes - if any where made - are picked up by Help Builder and redisplayed.

Keep in mind that when you use an external editor you can only change raw HTML content - none of Help Builders features like cross link embedding is available when you externally edit. It is however possible to embed a link in this mode manually.

Topic cross links are added with the following HTML markup:

<a href="vfps://Topic/_13213123123">Link Text with link by Topic ID</a>

You can also use the *exact* topic name of the cross link which might be easier to write out:

<a href="vfps://Topic/Some Other Topic Title">Link Text with link by Topic Title</a>