使用敲除时如何设置每个实例的 ckeditor 高度？

Question

我正在将 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...
    })
}

};

我可以在初始化函数中使用这段代码：

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

但是每个实例调用两次...所以我需要每个实例更专注的东西。可能吗？

Answer 1

我是这样解决这个问题的：

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

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

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

并且在 javascript 绑定处理程序上我有这个实现：

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

使用敲除时如何设置每个实例的 ckeditor 高度？

How to set ckeditor height per instance while using knockout?

knockout.js

ckeditor