Knockout.js 如何在使用knockout时设置每个实例的ckeditor高度？

我将ckeditor与knockout.js一起使用，似乎无法为每个实例设置编辑器的实例。 这是我的密码：

ko.bindingHandlers.CKEDITOR = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
    var ckEditorValue = valueAccessor();
    var id = $(element).attr('id');
    var options = allBindings().EditorOptions;
    var instance = CKEDITOR.replace(id, {
        on: {
            change: function () {
                ckEditorValue(instance.getData());
            }
        },
        height: 350 // doesn't set the height...
    })
}

})

我可以在init函数中使用以下代码：

CKEDITOR.on('instanceReady', function () {
    if (typeof (options) != 'undefined') {
          viewModel.css({ 'width': options.Width });
          viewModel.find('.cke_contents').css({ 'height': options.Height });
      }
    });

但对于每个实例，这是调用的两倍。。。因此，我需要对每个实例更加关注。

---

有可能吗？

我设法这样解决了这个问题：

首先，我为html中的每个编辑器设置了一个选项绑定，如下所示：

<textarea data-bind="CKEDITOR: Content, id: '1', EditorOptions: { height: 250, width: 670 }"></textarea>

<textarea id="2" data-bind="CKEDITOR: Content, EditorOptions: { height: 100 }"></textarea>

---

没有有效的例子很难判断。您的高度：350实例定义。调试时，我可以看到它将高度设置为350，然后使用内联样式覆盖它。

ko.bindingHandlers.CKEDITOR = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var ckEditorValue = valueAccessor();
        var id = $(element).attr('id');
        var allBindings = allBindings();

        // this holds the height for each instance
        var options = allBindings.EditorOptions;

        id = (typeof allBindings.id == 'undefined' ? id : allBindings.id);

        $(element).attr('id', id);

        var ignoreChanges = false;

        var defaultConfig = {};
        defaultConfig.toolbar = [
                                    ["Undo", "Redo"],
                                    ["Bold", "Italic", "Underline", "Strike", "RemoveFormat", "-", "TextColor"],
                                    ["NumberedList", "BulletedList", "Outdent", "Indent"],
                                    ["JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"],
                                    ["Link", "Unlink"]
                                ];
        defaultConfig.defaultLanguage = 'en';
        defaultConfig.removePlugins = 'resize, wordcount, elementspath, magicline';
        defaultConfig.enterMode = CKEDITOR.ENTER_BR;

        defaultConfig.on = {
            change: function () {
                ignoreChanges = true;
                ckEditorValue(instance.getData());
                ignoreChanges = false;
            }
        };

        // merge the height with the defaultConfig
        $.extend(defaultConfig, options);

        var instance = CKEDITOR.replace(id, defaultConfig);

        instance.setData(ckEditorValue());

        ckEditorValue.subscribe(function (newValue) {
            if (!ignoreChanges) {
                instance.setData(newValue);
            }
        });
    }
};