Documentation:TinyMCE editor

When you want to have a better editing experience for texts, TinyMCE might be the way to go.

Look here EXT Components for instructions.

For integrating with AngularJS, we use this project on GitHub: https://github.com/angular-ui/ui-tinymce

You can follow their example with some changes.

The GitHub project defines a AngularJS module. Modules can't normally be loaded after the main app module has been loaded, and there's no way to tell the MDrivenAngularApp to be dependent on new modules beforehand.

Therefore, add this code to the end of the ui-tinymce code

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

This will insert the tinymce module into the MDrivenAngularAppModule making it's directive available

You also need to add a AppWideAngularScriptIncludes for loading the TinyMCE. Look here for URLs https://www.tiny.cloud/get-tiny/

You can then use this code

<textarea ui-tinymce ng-model='data.[ViewModelColumnName]'/>

as your override cshtml.

The code we are using

We download and store a copy of the TinyMCE editor as an Asset in the turnkey site.

Download it here: File:TinyMCE.zip

Notes

• TinyMCE.cshtml is used server-side to load the Tiny editors AngularJS directive
• tinymce.js is the code from https://github.com/angular-ui/ui-tinymce with minor changes
• One change is that we load user options for the editor from userOptions.json making it easier to adapt the editor to each project. The zip-file contains option file to include all free options of TinyMCE
• Added JS to enable upload of local images to be base64 encoded in HTML