所以我试图让淘汰赛与summernote 一起玩得很好，但这并没有真正奏效。我意识到这是因为summernote 使用<div contenteditable> 而不仅仅是一个输入字段。
我的绑定是这样的：
ko.bindingHandlers.summernote = {
init: function (element, valueAccessor) {
var options = valueAccessor();
$(element).summernote(options);
}
};
显然，仅使用 contenteditable 淘汰赛效果不佳，那我该怎么办？
【问题讨论】：
采取其他一些答案并使其适用于当前版本的 Summernote 我做了以下工作：
需要注意的是：这个 bindinghandler 也适应来自 viewModel 的入站更改。
ko.bindingHandlers.wysiwyg = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
var allBindings = ko.unwrap(allBindingsAccessor())
var optionsBinding = allBindings.wysiwygOptions || {};
var $element = $(element);
var options = $.extend({}, optionsBinding);
var updateObservable = function (e) {
valueAccessor($element.summernote('code'));
return true;
};
options.callbacks = {};
options.callbacks.onKeyup = options.callbacks.onFocus = options.callbacks.onBlur = updateObservable;
$element.html(value).summernote(options);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
$(element).summernote('code', value);
}
};
一些选项已更改，您不必调查事件 dom 数据。此外，我不需要同时更新 keyDown 和 keyUp，所以我的事件列表有点不同。而且我的绑定处理程序不是“summernote”，以便在将来更灵活地进行更改。这只是所见即所得。 YMMV
【讨论】：
实际上，我开始考虑更多，并决定发布我自己的解决方案，因为 google 上没有其他任何东西。我所做的只是将上述绑定更改为：
ko.bindingHandlers.summernote = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = valueAccessor();
var binding = ko.utils.unwrapObservable(allBindingsAccessor()).value;
var updateObservable = function(e) {
binding(e.currentTarget.innerHTML);
};
options.onkeydown = options.onkeyup = options.onfocus = options.onblur = updateObservable;
$(element).summernote(options);
}
};
只需观看 blur / focus / keypress / keyrelease 事件就足以更新 observables。它并不完美，但它确实有效。
【讨论】：
我正在使用以下双向绑定，它适用于我...
敲除绑定（在 CoffeeScript 中）：
ko.bindingHandlers.summernote =
init: (element, valueAccessor, allBindingsAccessor) ->
options = valueAccessor()
options.toolbar = [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['style']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['misc', ['codeview']],
]
options.onblur = () -> valueAccessor() $(element).code()
$(element).summernote(options)
update: (element, valueAccessor, allBindingsAccessor) ->
$(element).code(ko.utils.unwrapObservable(valueAccessor()))
在 HTML 中的用法：
<textarea data-bind="summernote: Content"></textarea>
【讨论】：
我的解决方案是监听onChange 事件
ko.bindingHandlers.summernote = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
var $element = $(element);
$element.html(value).summernote({
onChange: function (contents) {
valueAccessor()(contents);
}
});
}
};
编辑
v0.7.0 以后，每个回调都应该被回调对象包裹。
ko.bindingHandlers.summernote = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
var $element = $(element);
$element.html(value).summernote({
callbacks:{ // added for V0.7.0
onChange: function (contents) {
valueAccessor()(contents);
}
}
});
}
};
【讨论】：
对先前答案的小修复和更改：
这是我的更新：
ko.bindingHandlers.summernote = new function () {
var isblur = false;
this.init = function (element, valueAccessor, allBindings) {
var value = valueAccessor();
var options = $.extend(value, {
height: 100,
toolbar: [
["style", ["bold", "italic", "underline", "clear"]],
["fontstyle", ["style"]],
["fontsize", ["fontsize"]],
["lists", ["ul", "ol", "paragraph"]],
["links", ["link", "picture"]],
["misc", ["fullscreen", "codeview"]]
],
onblur: function () {
isblur = true;
value($(element).code());
isblur = false;
}
});
$.extend(options, allBindings.get("summerOptions"));
return $(element).summernote(options);
};
this.update = function (element, valueAccessor) {
if (!isblur) {
var value = valueAccessor();
$(element).code(value());
}
};
};
及用法：
<textarea data-bind="summernote: Content"></textarea>
或使用选项覆盖：
<textarea data-bind="summernote: Content, summerOptions: { height: 200 }"></textarea>
【讨论】：
ko.bindingHandlers.summernote = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
var $element = $(element);
$element.html(value).summernote({
callbacks:{
onChange: function (contents) {
valueAccessor()(contents);
}
}
});
}
};
【讨论】：
使用这个解决方案，它对我有用
ko.bindingHandlers.summernote = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
var allBindings = ko.unwrap(allBindingsAccessor())
var optionsBinding = allBindings.summernoteOptions || {};
var $element = $(element);
var options = $.extend({}, optionsBinding);
var updateObservable = function (e) {
valueAccessor()($element.summernote('code'));
return true;
};
options.callbacks = {};
//options.callbacks.onFocus = options.callbacks.onBlur = updateObservable;
$element.html(value).summernote(options);
$(element).next().find('.note-editable').keyup(updateObservable);
$(element).next().find('.note-editable').bind('DOMNodeInserted DOMNodeRemoved', updateObservable);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
if (value != $(element).summernote('code')) {
$(element).summernote('code', value);
}
}
};
【讨论】：