基本上,我们的网站是“单页”应用程序风格的一部分,目前它只涉及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); } };