title: Updating tinymce editors with knockout
body: <p>I was able to get knockoutjs to create tinymce editors by following the example listed here: <a href="https://stackoverflow.com/questions/22110593/binding-knockout-with-tinymce">Binding knockout with tinymce</a></p>
  
  <p>The problem is when I try to update the underlying observables in the editableAreas observableArray.  The viewmodel updates, however, those changes are not reflected in the UI.  Here is a jsfiddle showing what I'm trying to do:
  <a href="http://jsfiddle.net/rsparkyc/DQ93k/2/" rel="nofollow noreferrer">http://jsfiddle.net/rsparkyc/DQ93k/2/</a></p>
  
  <p>Here's the javascript:</p>
  
  <pre><code>/*tinymce-knockout-binding v1.0.2|(c) 2014 Michael Papworth|https://raw.github.com/michaelpapworth/tinymce-knockout-binding/master/LICENSE*/
  !function(a,b){b.bindingHandlers.wysiwyg={extensions:{},init:function(c,d,e,f,g){if(!b.isWriteableObservable(d()))throw"valueAccessor must be writeable and observable";var h=e.has("wysiwygConfig")?e.get("wysiwygConfig"):{},i=e.has("wysiwygExtensions")?e.get("wysiwygExtensions"):[],j={browser_spellcheck:a(c).prop("spellcheck"),plugins:["link","paste"],toolbar:"undo redo | bold italic | bullist numlist | link",menubar:!1,statusbar:!1,setup:function(a){a.on("change keyup nodechange",function(c){d()(a.getContent());for(var f in i)b.bindingHandlers.wysiwyg.extensions[i[f]](a,c,e,g)})}};j=a.extend(j,h),a(c).text(d()()).tinymce(j),b.utils.domNodeDisposal.addDisposeCallback(c,function(){a(c).tinymce().remove()})},update:function(a,c,d,e,f){return b.bindingHandlers.value.update(a,c,d,e,f)}}}(jQuery,ko),function(a){a.extensions.dirty=function(a,b,c,d){if(c.has("wysiwygDirty")){var e=c.get("wysiwygDirty");if(!ko.isWriteableObservable(e))throw"wysiwygDirty must be writeable and observable";e(a.isDirty())}else d.$root.isDirty=a.isDirty()}}(ko.bindingHandlers.wysiwyg),function(a){a.extensions.wordcount=function(a,b,c,d){var e=a.plugins.wordcount;if(e&amp;&amp;c.has("wysiwygWordCount")){var f=c.get("wysiwygWordCount");if(!ko.isWriteableObservable(f))throw"wysiwygWordCount must be writeable and observable";f(e.getCount())}}}(ko.bindingHandlers.wysiwyg);
  //# sourceMappingURL=wysiwyg.min.map
  
  
  function ViewModel() {
      var self = this;
      self.timesChanged = 0;
      self.editableAreas = ko.observableArray([{
          id : 1,
          txt: ko.observable('first text area')
      },{
          id : 2,
          txt: ko.observable('second text area')
      },{
          id : 3,
          txt: ko.observable('all observable text area')
      }]);
      self.wysiwygOptions = {    
          schema: 'html5',
          inline: true,
          toolbar: 'bold italic underscore',
          menubar: false
      };
  
      self.changeText = function() {
          self.timesChanged++;
          self.editableAreas()[0].txt('&lt;p&gt;this text has changed ' + self.timesChanged + ' times&lt;/p&gt;');   
      }
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>And here's the HTML:</p>
  
  <pre><code>In the paragraph below you can edit your html. Knockout with textarea bindings
  
  &lt;div data-bind="foreach: editableAreas"&gt;
      &lt;div class="editableArea" data-bind="wysiwyg: txt, wysiwygConfig: $parent.wysiwygOptions "&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;h3&gt;Non-editable area with same data&lt;/h3&gt;
      &lt;div data-bind="foreach: editableAreas"&gt;
          &lt;div data-bind="text: txt"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button data-bind="click:changeText"&gt;Change Text!&lt;/button&gt;
  </code></pre>