asp.net-mvc – Knockout,CKEditor&Single Page App

我有一个情况涉及KnockoutJS& CKEditor的。

基本上，我们的网站是“单页”应用程序风格的一部分，目前它只涉及2页，但可能会随着时间而扩展，目前它只是一个“列表”页面和一个“管理”页面名单。

管理页面本身需要一些丰富的文本编辑器，我们已经与CKEditor进行了一个全面的解决方案。

因为这两个页面是“单页”风格，显然CKEditor无法注册管理元素，因为它们不在页面加载 – 简单足够的问题来修复。所以作为一个例子，我把CKEditor附加在一个很好的点击事件上。接下来的问题是，已经安装的Knockout可观察器没有被更新，因为CKEditor实际上并没有修改它附加的textarea，它也创建了你实际编辑的所有这些div / html元素。

经过一段时间的googleing，我发现有人用TinyMCE – http://jsfiddle.net/rniemeyer/GwkRQ/做了这个例子，所以我以为我可以适应CKEditor类似的东西。

目前，我非常接近有一个工作的解决方案，我已经初始化并使用这种技术更新正确的观察(我将在底部发布代码)，甚至正确地发布到服务器 – 太棒了。

我目前遇到的问题是“单页”应用程序部分和CKEditor的重新初始化。

基本上，您可以从列表中单击以进行管理，然后保存(返回到列表页面)，然后当您转到另一个“管理”CKEditor初始化时，它没有任何值，我已经检查更新代码(以下)和“值”绝对具有正确的值，但不会被推送到CKEditor本身。

也许对于CKEditor的流程/初始化过程缺乏了解，或者缺乏对敲除绑定的理解，或者这是为单页应用程序设置的框架的问题 – 我不确定。

这是代码：

//Test one for ckeditor
ko.bindingHandlers.ckeditor = {
    init: function (element,valueAccessor,allBindingsAccessor,context) {
        var options = allBindingsAccessor().ckeditorOptions || {};
        var modelValue = valueAccessor();

        $(element).ckeditor();

        var editor = $(element).ckeditorGet();

        //handle edits made in the editor
        editor.on('blur',function (e) {
            var self = this;
            if (ko.isWriteableObservable(self)) {
                self($(e.listenerData).val());
            }
        },modelValue,element);


        //handle destroying an editor (based on what jQuery plugin does)
        ko.utils.domNodeDisposal.addDisposeCallback(element,function () {
            var existingEditor = CKEDITOR.instances[element.name];
            existingEditor.destroy(true);
        });
    },update: function (element,context) {
        //handle programmatic updates to the observable
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).html(value);
    }
};

所以在HTML中，当初始化ViewModel时，它是一个相当标准的“数据绑定：ckeditor”，它可以为其绑定。

我把调试器在代码中查看流程，看起来像是在我第一次加载init的时候加载，然后更新，当我第二次进入ko.utils.domNodeDisposal来处理元素的时候。

我试图不破坏它，CKEditor然后抱怨说，这个名称已经存在。我试图不破坏它，检查它是否存在和初始化，如果它不 – 这是第一次工作，但第二次没有CKEditor。

我认为只有一件事我失踪了，这将使它工作，但我已经耗尽了所有的选择。

有没有人有任何知识可以帮助我整合这3件事情？

那里有什么淘汰专家可能能够帮助我吗？

任何帮助将不胜感激。

MD

解决方法

对于有兴趣的人我排序：

所有这一切都是一个基本的执行顺序，我只需要在初始化之前将该值设置为textarea html。

请注意，它使用jquery适配器扩展来在元素上执行.ckeditor()。

可能还有一个更好的方法来做“模糊”部分。

此扩展也不适用于当前的选项，但应该相当简单。

ko.bindingHandlers.ckeditor = {
    init: function (element,context) {
        var options = allBindingsAccessor().ckeditorOptions || {};
        var modelValue = valueAccessor();
        var value = ko.utils.unwrapObservable(valueAccessor());

        $(element).html(value);
        $(element).ckeditor();

        var editor = $(element).ckeditorGet();

        //handle edits made in the editor

        editor.on('blur',element);
    }
};