1

-> 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);
    }
4

0 回答 0