CODEWITHSUNDEEP
knockout.jstinymcetinymce-4
Ryan Caskey
Ryan Caskey

Reputation: 607

Updating tinymce editors with knockout

I was able to get knockoutjs to create tinymce editors by following the example listed here: Binding knockout with tinymce

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: http://jsfiddle.net/rsparkyc/DQ93k/2/

Here's the javascript:

/*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&&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('<p>this text has changed ' + self.timesChanged + ' times</p>');   
    }
}

ko.applyBindings(new ViewModel());

And here's the HTML:

In the paragraph below you can edit your html. Knockout with textarea bindings

<div data-bind="foreach: editableAreas">
    <div class="editableArea" data-bind="wysiwyg: txt, wysiwygConfig: $parent.wysiwygOptions "></div>
</div>
<div>
    <h3>Non-editable area with same data</h3>
    <div data-bind="foreach: editableAreas">
        <div data-bind="text: txt"></div>
    </div>
</div>
<button data-bind="click:changeText">Change Text!</button>

Upvotes: 2

Views: 1455

Answers (2)

Michael Papworth
Michael Papworth

Reputation: 453

Firstly, I'd just like to thank you for deciding to use my binding. I've noticed that you are using version 1.0.2, this issue has since been resolved. May I recommend that you update the binding to the latest version (v1.1.1)?

Upvotes: 2

Gabriel Doty
Gabriel Doty

Reputation: 1786

It appears that the wysiwyg plugin does not subscribe to the observable change events. An alternative would be to refresh the observableArray...

Unfortunately, the knockout "valueHasMutated" function does not appear to be reliable for forcing the UI to update. There is a dirty workaround documented here :

Refresh observableArray when items are not observables

Basically the fix is adding this line after your change to your observables...

var data = self.array();self.array(null);self.array(data);

Upvotes: 0

Related Questions