(Created page with "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, u...") |
No edit summary |
||
| Line 3: | Line 3: | ||
Look here [[EXT Components]] for instructions. | Look here [[EXT Components]] for instructions. | ||
For integrating with AngularJS, use this project on GitHub: https://github.com/angular-ui/ui-tinymce | 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. | You can follow their example with some changes. | ||
| Line 18: | Line 18: | ||
You can then use this code | You can then use this code | ||
<textarea ui-tinymce ng-model='data.[ViewModelColumnName]'/> | <textarea ui-tinymce ng-model='data.[ViewModelColumnName]'/> | ||
as your override cshtml | 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 | |||
Revision as of 14:18, 20 November 2020
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