->AceJavaScriptエディターをKnockoutJSに統合したいと思います。
->残念ながら、Javascriptの制限に達したようですので、ここではJavaScriptSithMastersに目を向けます。
->HTMLは"id=" editor "data-bind =" ace：Value"のdivです。
-> 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) {
}
}
});
->値が->editorに割り当てられている編集時ではなく、最初にロードされたときにのみ機能します。
->参考までに私は示されているように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);
}