Question

我实际上并不知道如何详细说明这个错误，但是这是怎么回事：我正在使用CKEditor在同一个屏幕上使用knockout js“foreach”使用多个textareas。

CKEditor和knockout js一起实现：

ko.bindingHandlers.CKEDITOR = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var ckEditorValue = valueAccessor();
        var id = $(element).attr('id');
        var allBindings = allBindings();
        var options = allBindings.EditorOptions;
        var visible = (typeof allBindings.visible == 'undefined' ? true : allBindings.visible);
        id = (typeof allBindings.id == 'undefined' ? id : allBindings.id);

        if (!visible || id == '') {
            $(element).hide();
            return;
        }

        $(element).attr('id', id).addClass("orb-ckeditor");

        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;
            }
        };
        $.extend(defaultConfig, options);
        var instance = CKEDITOR.replace(id, defaultConfig);

        instance.setData(ckEditorValue());

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

这是HTML：

<div class="quiz-settings" data-bind="foreach: items">
    <textarea data-bind="CKEDITOR: PropertyObjectValue, visible: (PropertyType == 'MULTILINES' || PropertyType == 'EMAIL'), id: 'txtProp' + PropertyID"></textarea>
</div>

我正在使用AJAX调用保存数据，并在success方法上将数据重新绑定到编辑器。它在Chrome中工作正常但在IE9中，当我点击它进行编辑时，编辑器在保存操作后被禁用但当我点击打开调色板的字体颜色按钮时，编辑器再次启用

我不知道为什么会发生这种情况或如何解决它......

Answer 1

好吧，我解决了： - ）

我在ko.bindingHandlers.CKEDITOR

中添加了这些行

// Destroy instance if exist
if (CKEDITOR.instances[id]) {
    CKEDITOR.instances[id].destroy();
}

像这样：

ko.bindingHandlers.CKEDITOR = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var ckEditorValue = valueAccessor();
        var id = $(element).attr('id');
        var allBindings = allBindings();
        var options = allBindings.EditorOptions;
        var visible = (typeof allBindings.visible == 'undefined' ? true : allBindings.visible);
        id = (typeof allBindings.id == 'undefined' ? id : allBindings.id);

        if (!visible || id == '') {
            $(element).hide();
            return;
        }

        $(element).attr('id', id).addClass("orb-ckeditor");

        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;
            }
        };
        $.extend(defaultConfig, options);

        // Destroy instance if exist
        if (CKEDITOR.instances[id])
            CKEDITOR.instances[id].destroy();

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

        instance.setData(ckEditorValue());

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

IE9 - CKEdtor在使用knockout js

1 个答案: