You can add the TinyMCE rich-text editor to a ViewModel field in Turnkey when users need to create and edit HTML content.

TinyMCE is integrated as an external component. The integration uses the AngularJS ui.tinymce directive and makes that directive available to the MDriven Angular application.

What you need

Before you start, prepare the following:

• A ViewModel column that will hold the editor content. In the example below, the column is named BodyHtml.
• The TinyMCE editor files, either from the supplied package or from TinyMCE.
• The AngularJS UI-TinyMCE directive code from angular-ui/ui-tinymce.
• An override .cshtml file containing the editor markup.

MDriven provides a downloadable implementation package: File:TinyMCE.zip. The package contains the editor resources and configuration used by the MDriven example.

Add TinyMCE to your Turnkey application

1. Store the editor files as assets

Download TinyMCE and store a copy of its files as assets on the Turnkey site. The supplied File:TinyMCE.zip is one way to obtain the files used in the example implementation.

The package includes these relevant parts:

Item	Purpose
TinyMCE.cshtml	Server-side file used to load the AngularJS directive for TinyMCE.
tinymce.js	The code based on the angular-ui/ui-tinymce project, with MDriven-specific changes.
userOptions.json	Editor configuration. The supplied options file contains the free TinyMCE options and lets each project adapt the editor configuration without changing the directive code.

The included implementation also contains JavaScript that encodes locally uploaded images as Base64 in the HTML content.

2. Load the scripts application-wide

Add an AppWideAngularScriptIncludes entry for the TinyMCE script resources so that the editor library and the UI-TinyMCE directive are loaded in the application. Obtain TinyMCE download and script information from TinyMCE.

The directive must be available before a view tries to use ui-tinymce.

3. Register the UI-TinyMCE AngularJS module

The UI-TinyMCE project defines its own AngularJS module, ui.tinymce. AngularJS modules normally cannot be added after the main application module has loaded, and MDrivenAngularApp cannot be declared to depend on a new module in advance.

To make the directive available, add the following code at the end of the UI-TinyMCE code:

// Push the module into the MDrivenAngularAppModule (hack way)
angular.module(MDrivenAngularAppModule).requires.push('ui.tinymce');

This adds ui.tinymce to MDrivenAngularAppModule and enables the ui-tinymce directive in your override.

Gotcha: Keep this registration with the loaded UI-TinyMCE code. If the module is not loaded and registered, a textarea using ui-tinymce cannot use the TinyMCE directive.

4. Add the editor to an override

Create or update the relevant override .cshtml file and bind the textarea to the ViewModel column that stores the HTML.

For a ViewModel column named BodyHtml, use:

<textarea ui-tinymce ng-model='data.BodyHtml'></textarea>

Replace BodyHtml with your own ViewModel column name. For example, if an administrator edits a page introduction through a column named Introduction, bind the editor as follows:

<textarea ui-tinymce ng-model='data.Introduction'></textarea>

The ng-model binding connects TinyMCE content to the ViewModel data, so edited HTML is stored in that column.

5. Configure the editor

Adjust userOptions.json to set the TinyMCE options for the project. Keeping options in this file separates project-specific editor configuration from the directive implementation.

For example, use the options file to select the available free TinyMCE features for an editorial field, rather than modifying tinymce.js for each project.

Display the saved HTML

TinyMCE produces HTML. If you want to display the saved content as rendered HTML elsewhere in Turnkey, use Column.DataIsHtml for the column that points to the field containing that HTML.

For example, an administrator can edit BodyHtml with TinyMCE and another view can render that content through a column tagged with DataIsHtml. The HTML is data-bound, so changes to the content can update the rendered page dynamically.

Use this pattern for content that is intended to be authored as HTML. Review the HTML handling appropriate for your application before allowing untrusted users to enter content.

Example implementation flow

1. Create a ViewModel column named BodyHtml for the content to edit in ViewModel Editor.
2. Add the TinyMCE files and the modified tinymce.js as Turnkey assets.
3. Add the required script URLs through AppWideAngularScriptIncludes.
4. Verify that tinymce.js ends by adding ui.tinymce to MDrivenAngularAppModule.
5. Add <textarea ui-tinymce ng-model='data.BodyHtml'></textarea> to the field override.
6. Configure userOptions.json for the editor features needed by the project.
7. If the content must be displayed as HTML, configure the corresponding display column as described in Documentation:Column.DataIsHtml.

Related example

A complete model example, Markup Editor TinyMCE, demonstrates a rich HTML editor. Download it from Documentation:Complete model examples.

See also

• Documentation:Column.DataIsHtml
• Documentation:ViewModel Editor
• Documentation:Complete model examples
• Documentation:Input Controls
• Documentation:Tagged values in the Designer