Using ckeditor in Knockout as part of an observableArray

Question

I am trying to add the Rich Text Editor to my Survey system using CKeditor and knockout. I have my ViewModel, which has an observerable array of quesitons. I want to make the Name in each question use the ckeditor. I have look at the post Knockout.js: array parameter in custom binding. And have immplemented that but my OnBlur is not working. The ValueAccessor() is not returning an observable object. So I get an error that string is not a function() on this line of code..

  var observable = valueAccessor();
  observable($(element).val());

Here is my Html, I am just using a static Id for now on question, and was going to change that after I got this to work for just one question in the array.

<tbody data-bind="foreach: questionModel">
                                    <tr>
                                        <td>
                                            <button data-bind='click: $root.addQuestion' class="btn btn-success" title="Add Question"><i class="icon-plus-sign fontColorWhite"></i></button>
                                            <button data-bind='click: $root.removeQuestion' class="btn btn-danger" title="Remove Question"><i class="icon-minus-sign fontColorWhite"></i></button>
                                        </td>
                                        <td><textarea id="question123" class="RichText" data-bind="richText: Name"></textarea></td>
                                        <td><input type="checkbox" data-bind="checked: AllowComment"  /></td>
                                        <td><button data-bind="click: $root.addAnswer" class="btn btn-success" title="Add Answer"><i class="icon-plus-sign fontColorWhite"></i></button></td>
                                        <td>
                                            <div  data-bind="foreach: possibleAnswerModel">
                                                <input style="width: 278px"  style="margin-bottom: 5px;" data-bind='value: Name' />
                                                 <button data-bind='click: $root.removeAnswer' class="btn btn-danger" title="Remove Answer"><i class="icon-minus-sign fontColorWhite"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                </tbody>

Below is my ViewModel as well as my custom binding....

ko.bindingHandlers.richText = {
        init: function (element, valueAccessor, allBindingsAccessor, ViewModel) {

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

            console.log("TextBoxId: " + txtBoxID);

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

            options.toolbar_Full = [
                ['Bold', 'Italic'],
                ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
                ['Link', 'Unlink']
            ];
            //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 () {
                console.log("blur");
                console.log("Value: " + valueAccessor());
                console.log("Value: " + $(element).val());

                var observable = valueAccessor();
                observable($(element).val());

           };
        },

        update: function (element, valueAccessor, allBindingsAccessor, ViewModel) {
            var value = valueAccessor();

            console.log("Value Accessor: " + value);

            var valueUnwrapped = ko.utils.unwrapObservable(value);

            //var val = ko.utils.unwrapObservable(valueAccessor());
            console.log("Value: " + valueUnwrapped);
            $(element).val(valueUnwrapped);
        }
    };

function ViewModel(survey) {
        // Data
        var self = this;

        self.StartDate = ko.observable(survey.StartDate).extend({ required: { message: 'Start Date is required' } });
        self.EndDate = ko.observable(survey.EndDate).extend({ required: { message: 'End Date is required' } });
        self.Name = ko.observable(survey.Name).extend({ required: { message: 'Name is required' } });
        self.ButtonLock = ko.observable(true);

        self.questionModel = ko.observableArray(ko.utils.arrayMap(survey.questionModel, function(question) {
            return { Id: question.QuestionId, Name: ko.observable(question.Name), Sort: question.Sort, IsActive: question.IsActive, AllowComment: question.AllowComment, possibleAnswerModel: ko.observableArray(question.possibleAnswerModel) };
        }));

        // Operations
        self.addQuestion = function () {
            self.questionModel.push({
                Id: "0",
                Name: "",
                AllowComment: true,
                Sort: self.questionModel().length + 1,
                possibleAnswerModel: ko.observableArray(),
                IsActive:true
            });
        };

        self.addAnswer = function (question) {
            question.possibleAnswerModel.push({
                Id: "0",
                Name: "",
                Sort: question.possibleAnswerModel().length + 1,
                IsActive:true
            });
        };

        self.GetBallotById = function (id) {
            for (var c = 0; c < self.BallotProjectStandardList().length; c++) {
                if (self.BallotProjectStandardList()[c].BallotId === id) {
                    return self.BallotProjectStandardList()[c];
                }
            }
            return null;
        };

        self.removeQuestion = function(question) { self.questionModel.remove(question); };

        self.removeAnswer = function(possibleAnswer) { $.each(self.questionModel(), function() { this.possibleAnswerModel.remove(possibleAnswer) }) };

        self.save = function() {
            if (self.errors().length == 0) {
                self.ButtonLock(true);
                $.ajax("@Url.Content("~/Survey/Create/")", {
                    data: ko.toJSON(self),
                    type: "post",
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data) { self.successHandler(data, data.success); },
                    error: function() {
                        self.ButtonLock(true);
                        self.errorHandler();
                    }
                });
            } else {
                self.errors.showAllMessages();
            }
        };
    }

    ViewModel.prototype = new ErrorHandlingViewModel();
    var mainViewModel = new ViewModel(@Html.Raw(jsonData));
    mainViewModel.errors = ko.validation.group(mainViewModel);
    ko.applyBindings(mainViewModel);

Answer 1

I figured what I was doing wrong. When I define the observableArray() I was defining the object as ko.observable, however, when I add a question to the array, I was initializing it as a string. So I change that to match and it worked like a champ. Here is the change push.

     self.questionModel = ko.observableArray(ko.utils.arrayMap(survey.questionModel, function(question) {
            return { Id: question.QuestionId, Name: ko.observable(question.Name), Sort: question.Sort, IsActive: question.IsActive, AllowComment: question.AllowComment, possibleAnswerModel: ko.observableArray(question.possibleAnswerModel) };
        }));

        // Operations
        self.addQuestion = function () {
            self.questionModel.push({
                Id: "0",
                Name: ko.observable(),
                AllowComment: true,
                Sort: self.questionModel().length + 1,
                possibleAnswerModel: ko.observableArray(),
                IsActive:true
            });
        };