我遇到了涉及 KnockoutJS 和 CKEditor 的情况。
基本上,我们网站的一部分是“单页”应用程序样式,目前它只涉及 2 个页面,但可能会随着时间的推移而扩展,目前它只是一个“列表”页面和一个用于项目的“管理”页面列表。
管理页面本身需要某种富文本编辑器,我们已经使用 CKEditor 为公司范围的解决方案。
因为这 2 个页面是“单页”样式,显然 CKEditor 无法注册管理元素,因为它们在页面加载时不存在 - 足够简单的问题来解决。因此,作为一个示例,我将 CKEditor 附加到了一个效果很好的点击事件上。下一个问题是,已经设置的 Knockout observables 没有得到更新,因为 CKEditor 实际上并没有修改它附加的文本区域,它创建了所有这些你实际编辑的 div/html 元素。
经过一番谷歌搜索后,我找到了一个使用 TinyMCE 执行此操作的示例 - http://jsfiddle.net/rniemeyer/GwkRQ/所以我想我可以为 CKEditor 调整类似的内容。
目前我已经非常接近有一个可行的解决方案了,我已经使用这种技术初始化和更新了正确的 observables(我将在底部发布代码),甚至正确地发回服务器 - 太棒了。
我目前遇到的问题是“单页”应用程序部分和 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, valueAccessor, allBindingsAccessor, context) {
//handle programmatic updates to the observable
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).html(value);
}
};
因此,在 HTML 中,它是一个相当标准的淘汰赛“数据绑定:ckeditor”,它在 ViewModel 初始化时为其应用绑定。
我放了调试器;在代码中查看流程,看起来当我第一次加载时它调用 init,然后更新,当我第二次进入时它会点击 ko.utils.domNodeDisposal 来处理元素。
我试过不破坏它,然后 CKEditor 抱怨该名称已经存在。我试过不破坏它并检查它是否存在并初始化如果它不存在 - 这是第一次有效,但第二次我们没有 CKEditor。
我认为我缺少的只有一件事可以让它发挥作用,但我已经用尽了所有选择。
有谁知道整合这三件事可以帮助我吗?
有没有可以帮助我的淘汰专家?
任何帮助将非常感激。
医学博士