I am using bootstrap wysiwyg editor to replace the textarea that is being databinded to a observable value from viewModel.
<textarea data-bind="html:data, valueUpdate:'afterkeydown'"></textarea>
The above textarea updates the corresponding viewModel value everytime a key is pressed from inside the textarea.
Now the text area is replaced by wysiwyg bootstrap editor
<div class="editor" data-bind="html:data, valueUpdate:'afterkeydown'"></div>
Now the the observable is not updated on keydown.
any idea how to make this work?
Creating a custom bindinghandler "htmlUpdate" to div tags, similar to valueUpdate that is working with input elements?
also that should support inline HTML, Any ideas about how to reuse the "valueUpdate" to work with div elements?
Here is the fiddle http://jsfiddle.net/cHTCq/
KnockoutJS - Value Binding. This binding is used to link respective DOM element's value into ViewModel property. Mostly, this is used with elements such as input, select, and textarea. This is similar to text binding, the difference being, in value binding data can be changed by the user and the ViewModel will update it automatically.
Knockout has special support for drop-down lists (i.e., <select> elements). The value binding works in conjunction with the options binding to let you read and write values that are arbitrary JavaScript objects, not just string values. This is very useful if you want to let the user select from a set of model objects.
If you are trying to bind an <input type="text" /> or <textarea> to get instant updates to your viewmodel, use the the textInput binding. It has better support for browser edge cases than any combination of valueUpdate options. Knockout has special support for drop-down lists (i.e., <select> elements).
You can read more about custom bindings, value and binding accessors, and function arguments in the Knockout custom binding documentation. In our example, if edit mode is canceled, then old values (the values that were present before entering edit mode) must be restored.
Here is a simple binding to work with a contentEditable div like that and have it update as you type as well as when you click the formatting buttons:
ko.bindingHandlers.htmlValue = {
init: function(element, valueAccessor, allBindingsAccessor) {
var updateHandler = function() {
var modelValue = valueAccessor(),
elementValue = element.innerHTML;
//update the value on keyup
modelValue(elementValue);
};
ko.utils.registerEventHandler(element, "keyup", updateHandler);
ko.utils.registerEventHandler(element, "input", updateHandler);
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()) || "",
current = element.innerHTML;
if (value !== current) {
element.innerHTML = value;
}
}
};
Here is your fiddle updated to use it: http://jsfiddle.net/rniemeyer/hp3K6/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With