Placing an HTML Edit Control on a Form

Description

The following procedure describes the process of placing the Microsoft DHTML Edit Control for IE5 ( Dhtmledit.Dhtmledit ) ActiveX control on a form. This form is bound to the HTMLnotes memo field in the underlying table.

If using V12.4/ Windows 10 and above reference the following video instead of this guide:
Since the ActiveX control saves HTML encoded text into the memo field, it should only be edited and viewed through the ActiveX control.
  1. Open a form in the Form Editor.

  2. Select the following tool from the Toolbox and draw a rectangle on the form. This displays the Insert ActiveX Control dialog.

  3. Select the "Microsoft Web Browser" control and click Insert.

  4. Right click on the ActiveX control and select Properties... .

  5. Note the Object name found on the Setup tab.

  6. Close the ActiveX Properties dialog.

  7. Right click on the form's background and select Events > OnActivate.

  8. Assuming that the control's name is activeX1 and the memo field's name is HTMLNOTES, enter the following Xbasic code. This code causes the HTMLNOTES field of the current record to be displayed and turns off editing.

    dim px as P
    'get a pointer to the activeX object
    px = topparent:activex1.activex
    'set the activeX's documenthtml property
    dim tbl as P
    tbl = table.current()
    px.documenthtml = tbl.HTMLNOTES
    'set the activeX control to browse mode
    'you cannot edit text in the control when browsemode is .T.
    px.browsemode = .T.
  9. Click the 'save' icon to save the code and return to the Form Editor.

  10. Right click on the form's background and select Events > OnEnter.

  11. Enter the following Xbasic code. This code allows you to add a new record. It clears the ActiveX control and turns on editing.

    dim px as P
    'get a pointer to the activeX object
    px = topparent:activex1.activex
    px.documenthtml = ""
    px.browsemode = .T.
  12. Click the 'save' button to save the code and return to the Form Editor.

  13. Right click on the form's background and select Events > OnFetch.

  14. Enter the following Xbasic code. This code displays the current record when you are in Change or View mode, and gives you a clear window when in Enter mode.

    dim px as P
    'get a pointer to the activeX object
    px = topparent:activex1.activex
    'set the activeX control to browse mode -
    'you cannot edit text in the control when browsemode is .T.
    px.browsemode = .T.
    'set the activeX's documenthtml property
    dim tbl as P
    tbl = table.current()
    if (tbl.mode_get()<> 2) then
        px.documenthtml = t.HTMLNOTES
    'if you are in enter mode (i.e. you are on the new record),
    'then set the contents of the control to an empty string
    else
        px.documenthtml = ""
    end if
  15. Right click on the ActiveX control and select Events > ActiveXEvent.

  16. Modify the onkeypress() function to include this code.

    function onkeypress as v ()
        dim tbl as P
        tbl = table.current()
        'if the table is still in view mode
        'then put the form into change mode
        if (tbl.mode_get()= 0) then
           topparent.change_mode()
        end if
        t.HTMLNOTES = topparent:activex1.activex.documenthtml
    end function
  17. Click the 'save' icon to save the code and return to the Form Editor.

  18. Click the '-' button to place a button on the form.

  19. Label the button "Toggle In-place Editing", and place this code under its OnPush event. This code toggles the ability to edit in the ActiveX control.

    dim px as P
    'get a pointer to the activeX object
    px = topparent:activex1.activex
    px.browsemode = .not. px.browsemode
  20. Click the 'save' button to save the code and return to the Form Editor.

  21. Click the '-' button to place a button on the form.

  22. Label the button "Pop-up Editor", and place this code under its OnPush event. This code toggles opens the HTML Editor with the contents of the current record, and then saves its contents when you click OK.

    dim px as P
    'get a pointer to the activeX object
    px = topparent:activex1.activex
    dim ptr as P
    ptr = a5_html_modal(px.documenthtml, "Edit", .t.)
    if ptr.lastbutton = "OK" then
        px.documenthtml = ptr.text
        dim tbl as P
        tbl = table.current()
        if tbl.mode_get()= 0 then
            'force the form into change mode so
            'that the Save icon on the toolbar is enabled
            topparent.change_mode()
        end if
        'update the htmlNotes field
        tbl.HTMLNOTES = ptr.text
    end if
  23. Save your work and switch to form view. The form should look something like this:

See Also