tinymce angular 2+ templates not replacing values on init with ngmodel, but are with templates inserted by user

Question

I'm using TinyMCE editor component in my Angular 7 app. When i insert a template variable into the editor:

<span class="data-variable">${variable_name}</span>

It gets replaced fine with a value from my template_replace_values object i initialize tinymce with.

let template_replace_values = {variable_name: "hello world!"}

Ouput:

<span class="data-variable">hello world!</span>

However, when the template html gets populated via ngModel binding:

<editor #editor [(ngModel)]="html" (onChange)="updateStore(html)"></editor>

The html gets inserted like:

<span class="data-variable">${variable_name}</span>

And no replacement takes place. Do i need to somehow hook into a tinymce event from angular lifecycles?

Answer 1

The feature you reference is part of the template plugin so it is only triggered when you use that plugin to insert content. Using other APIs to inject content into the editor won't trigger that code so the replacement won't happen.

We do have editor events that can notify you when content is inserted into the editor and you could certainly choose to perform the replacement yourself when these events happen.