CKEditor

Here's my bindingHandler for CKEditor with Knockout.

ko.bindingHandlers.richText = {

    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        var txtBoxID = $(element).attr("id");

        var options = allBindingsAccessor().richTextOptions || {};

        options.toolbar_Full = [

                ['Source', '-', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor', '-', 'Bold', 'Italic', 'Underline', 'SpellChecker'],

                ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'],

                ['Link', 'Unlink', 'Image', 'Table']

        ]

        //handle disposal (if KO removes by the template binding)

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {

            if (CKEDITOR.instances[txtBoxID]) { CKEDITOR.remove(CKEDITOR.instances[txtBoxID]); };

        });

        $(element).ckeditor(options);

        //wire up the blur event to ensure our observable is properly updated

        CKEDITOR.instances[txtBoxID].focusManager.blur = function () {

            var observable = valueAccessor();

            observable($(element).val());

        };

    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        var val = ko.utils.unwrapObservable(valueAccessor());

        $(element).val(val);

    }

}

A typical use then would be in the HTML:

<textarea id="txt_viewModelVariableName" data-bind="richText: viewModelVariableName"></textarea>