Knockout TinyMCE Demo

Use the tinymce binding on any textarea element.

window.view1 = {
  string_of_html: ko.observable()
};

ko.applyBindings(view1, document.querySelector('#example-1-result'));

<section id='example-1-result'>
  <textarea data-bind='tinymce: string_of_html'>
</section>

Result:

You can also pass options via the tinymceConfig binding.

window.view2 = {
  string_of_html: ko.observable("<strong>click on me!</strong>")
};

ko.applyBindings(view2, document.querySelector('#example-2-result'));

<section id='example-2-result'>
  <div data-bind='tinymce: string_of_html, tinymceConfig: { inline: true }'><div>
</section>

Result:

The tynemce binding can also bind to non-observable properties.

window.view3 = {
  string_of_html: null
};

ko.applyBindings(view3, document.querySelector('#example-3-result'));

<section id='example-3-result'>
  <div data-bind='tinymce: string_of_html'><div>
</section>

Because view3.string_of_html is not observable, the displayed value won't update automatically, so you'll need to rebind view3 to update the value (unless you use something like Knockout-ES5).

Result: