So, I noticed that js knockout doesn't work very well with jQuery jwysiwyg plugin.
After reading this blog post: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html And this answer is SO: How to detect a change using jQuery for the contents of a text field, using jWYSIWYG plugin?
I wrote the following binding handler:
ko.bindingHandlers.wysiwyg = { init: function (element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().wysiwygOptions || {}; var value = ko.utils.unwrapObservable(valueAccessor()); var $e = $(element); $.extend(true, { initialContent : value }, options); $e.wysiwyg(options); //handle the field changing function detectFn() { var observable = valueAccessor(); var newvalue = $e.wysiwyg("getContent"); observable(newvalue); } var current = $e.wysiwyg('document'); var timer; current.bind({ keyup: function(){ clearTimeout(timer); timer = setTimeout(detectFn, 1000); } }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $e.wysiwyg('destroy'); }); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).wysiwyg("setContent", value); ko.bindingHandlers.value.update(element, valueAccessor); } };
use the following:
<textarea data-bind="wysiwyg: yourViewModelValue"></textarea>
While it works for me, any comments will be appreciated.
I think this can be useful for anyone looking for a way to create jquery jou and jwysiwyg by linking a textarea element.
source share