Morfik's TinyMCE Package provides a WYSIWYG editor to be used in Morfik-built websites.

The WYSIWYG editor implements a user-friendly interface that allows the user to create and edit a document in a view that closely resembles what the end result will look like.


package-view.png
package-down.png


A Quick Walkthrough

To use Morfik's TinyMCE Package, add the package to the project by using the ‘Used Packages’ command on the project ribbon (see Figure 1), or drag the package file onto the application main client area.


security-fig1.png
Figure 1: Used Packages Command


Once added, a TinyMCE widget will appear on the Home ribbon when the Form Designer is active.

TinyMCE Widget

The TinyMCE widget has a list of properties you may modify as described below:

Properties:

Date format allows you to enter the date format that will be used when the date is pasted upon clicking the Date button in the editor. For example, entering %m-%Y-%d will make a date appear in a format of Month-Year-Day, while entering %Y will make only a Year appear.


Preview height allows you to configure the height of a preview window.


Preview width allows you to configure the width of a preview window.


Read only allows you to make the editor content appear in read only mode. The content cannot be modified when this property is set.


Statusbar location allows you to specify the location of the status bar. You can either make it appear on the top of the editor window by setting this property to Top, at the bottom by setting this property to Bottom or hide the status bar by setting this property to None.


Text sets the text that will appear in the edit window when the page loads.


Time format allows you to enter the time format that will be used when the time is pasted upon clicking the Time button in the editor. For example, entering %H:%M:%S will make a time appear in a format of Hours-Minutes-Seconds, while entering %H:%M will make a time appear in a format of Hours-Minutes.


Toolbar align allows you to specify the alignment of a toolbar. You can either make it appear to the left by setting this property to Left, to the right by setting it to Right or centered by setting this property to Center.


Toolbar location allows you to specify the location of a toolbar. You can either make it appear above the editor window by setting this property to Top, below the editor window by setting to Bottom, or make it appear only after the editor window was clicked by setting this property to External.


Toolbar template allows you to select one of the preset toolbar buttons to be arranged and displayed at the toolbar.

You can set the content of the editor by using the setContent method like this:


FX Code

Procedure Tab1.btnLoadClick(Event: TDOMEvent);
Begin
    tmceMain.editor.setContent('<p>This <i>text</i> was loaded using <b>setContent</b> function</p>');
End;


To retrieve the content from the editor, use the getContent function:


FX Code

Procedure Tab1.btnGetClick(Event: TDOMEvent);
Begin
    teContent.text := tmceMain.editor.getContent;
End;

See Also

Back to top