How to use TinyMCE in a widget - turn comments to HTML field

[Aniko Hegedus]

Hi everyone,

We had a requirement to change the additional comments on the portal into HTML field. I have read a lot of different sources that you need to work with TinyMCE, but for me it took a while to understand how I can actually use it in a widget. So I'm summarizing below what I've learnt, maybe it'll be useful for someone else too.

If you want to use TinyMCE you have two OOB options: cfTinyMCE and spTiny. Both are angular providers (sp_angular_provider) and both can be called in a widget like you would do in any other case.

<sp-tinymce-editor 

                    ng-model="data.journalEntry"

                    ng-model-options="{getterSetter: true, plugins: 'paste', paste_as_text: false}"

                    ng-attr-resize="{{resize()}}" ng-keypress="keyPress($event)"

                    id="post-input"></sp-tinymce-editor>

gave me already a good start, but I was not able to attach images.

Then I found the info that you have to add this to the model option: 

attachment-guid="-1"  record-table-name="'incident'"

This helped, but if the user copied an image, the picture was visible only for him.

In the end I created a totally new widget and added cfTinyMCE as the angular provider. This way I was able to customize everything (almost) perfectly, see below

<cf-tiny-mce
ng-model="data.journalEntry"
ng-model-options="{
selector: 'textarea',
getterSetter: true,
plugins: [ 'image', 'table', 'link', 'media', 'fullscreen', 'lists', 'preview', 'autoresize'],
toolbar: ['undo redo | styleselect preview | fontsize fontname bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | table | link unlink | fullscreen'],
browser_spellcheck : true,
resize: 'both'
}"
ng-attr-resize="{{resize()}}"
ng-keypress="keyPress($event)"
id="post-input"
ng-click="postEntry(data.journalEntry)"
attachment-guid="-1"
record-table-name="'incident'"
>
</cf-tiny-mce>

Note:

- placeholder does not work with these fields

- I'm not sure I completely understand why one toolbar button works and the other not, but often you have to add the plugin too (eg in case of fullscreen)

- I couldn't make the image button work, it works with spTiny, so probably I could have merged the two scripts if I had more time 

I don't think I will be able to answer any questions, but I think such a summary would have been useful for me not to waste so much time.

Aniko