- >我想将Ace JavaScript编辑器集成到KnockoutJS中。
- >不幸的是,似乎我已经达到了我对Javascript的限制所以我在这里转向JavaScript Sith Masters。
- > HTML是div,带有“id =”编辑器“data-bind =”ace:Value“。
- > Value是viewModel中textEditor的实际值。
Ace的自定义绑定处理程序的开始:
ko.bindingHandlers.ace = {
init: function (element, valueAccessor) {
var editor = ace.edit(element.id);
var eitorValue = valueAccessor();
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/html");
//handle edits made in the editor
editor.getSession().on('change', function (e) {
if (ko.isWriteableObservable(eitorValue)) {
eitorValue(editor.getValue());
}
});
},
update: function (element, valueAccessor) {
}
}
});
- >它仅在第一次加载时才起作用,而不是在编辑时将值分配给 - >编辑器。
- >对于参考,我试图实现像所示的tinyMce
ko.bindingHandlers.tinymce = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
var options = allBindingsAccessor().tinymceOptions || {};
var modelValue = valueAccessor();
//handle edits made in the editor
options.setup = function(ed) {
ed.onChange.add(function(ed, l) {
if (ko.isWriteableObservable(modelValue)) {
modelValue(l.content);
}
});
};
//handle destroying an editor (based on what jQuery plugin does)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).parent().find("span.mceEditor,div.mceEditor").each(function(i, node) {
var ed = tinyMCE.get(node.id.replace(/_parent$/, ""));
if (ed) {
ed.remove();
}
});
});
$(element).tinymce(options);
},
update: function(element, valueAccessor, allBindingsAccessor, context) {
//handle programmatic updates to the observable
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).html(value);
}