-> I would like to integrate the Ace JavaScript editor into KnockoutJS.
-> Unfortunately, it seems I've reached my limits on Javascript so I'm turning to JavaScript Sith Masters here.
-> The HTML is div with "id="editor" data-bind="ace:Value".
-> Value is the actual value for the textEditor from the viewModel.
The start of my custom binding handler for 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) {
}
}
});
-> It only works when first loaded not at the time of edit when the value is assign to -> editor.
-> For Reference i am trying to achieve something like tinyMce as shown
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);
}