CKEditor 未捕获的类型错误:无法在具有多个编辑器的 EmberJS 单页应用程序中调用 null 的“不可选择”
CKEditor Uncaught TypeError: Cannot call method 'unselectable' of null in EmberJS single page app with multiple editors
>我有一个使用EmberJS创建的单页应用程序。
我在页面上有 3 个文本区域。
一旦文本区域插入 dom,我就会渲染 ckeditor,并且我在控制器上标记一个属性,记录 ckeditor 已被渲染,这样我就不会多次渲染它。
我什至正在研究 dom 以验证那里目前没有编辑器。
刷新页面时,我随机收到此错误:
Uncaught TypeError: Cannot call method 'unselectable' of null
我不知道是什么原因造成的,也不知道现在要阻止它。当它没有抛出该错误时,所有 3 个 ckeditor 看起来都很好。
这是我给编辑器的提示代码:
Lrt.PrioritizationEditableTextArea = Ember.TextArea.extend({
areaVisible: false,
isRendered: false,
isInserted: false,
didInsertElement:function(){
this.set('isInserted', true);
},
renderEditor:function(){
var self = this;
var selfID = self.get('elementId');
if( !this.get('isRendered') && this.get('isInserted') && $('#'+selfID).parent().find('cke').length === 0 ){
var editor = $('#'+selfID).ckeditor({
toolbar:[
{ name: 'document', items:['Source'] },
{ name: 'clipboard', items:['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
{ name: 'editing', items:['scayt']},
{ name: 'basicstyles', items:['Bold', 'Italic', 'Underline', 'TextColor', 'BGColor', '-', 'RemoveFormat']},
{ name: 'styles', items:['FontSize']},
{ name: 'paragraph', items:['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-']}
]
}).editor;
editor.on('change', function(e){
if(e.editor.checkDirty()){
self.set('value', editor.getData());
}
});
this.set('isRendered', true);
}
}.observes('areaVisible')
});
我还使用 ckeditor 的"onChange"插件在编辑器发生任何更改并响应它时触发"onChange"事件。
我尝试过的:
- 删除 onChange 插件
- 将 ckeditor 更改为 4.3 测试版
- 删除工具栏自定义项
- 删除 onChange 事件侦听器
- 在呈现时验证所有文本区域中是否包含内容
我需要做什么来解决这个问题?
编辑
这是堆栈跟踪:(我正在我的应用程序中添加 ver 字符串(
a (ckeditor.js?ver=2.0.0:291)
(anonymous function) (ckeditor.js?ver=2.0.0:287)
i (ckeditor.js?ver=2.0.0:10)
CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?ver=2.0.0:12)
CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js?ver=2.0.0:13)
CKEDITOR.event.CKEDITOR.event.fireOnce (ckeditor.js?ver=2.0.0:12)
CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js?ver=2.0.0:13)
(anonymous function) (ckeditor.js?ver=2.0.0:223)
m (ckeditor.js?ver=2.0.0:203)
CKEDITOR.scriptLoader.load (ckeditor.js?ver=2.0.0:203)
(anonymous function) (ckeditor.js?ver=2.0.0:222)
(anonymous function) (ckeditor.js?ver=2.0.0:210)
(anonymous function) (ckeditor.js?ver=2.0.0:208)
m (ckeditor.js?ver=2.0.0:203)
CKEDITOR.scriptLoader.load (ckeditor.js?ver=2.0.0:203)
CKEDITOR.resourceManager.load (ckeditor.js?ver=2.0.0:207)
h (ckeditor.js?ver=2.0.0:209)
(anonymous function) (ckeditor.js?ver=2.0.0:210)
m (ckeditor.js?ver=2.0.0:220)
(anonymous function) (ckeditor.js?ver=2.0.0:220)
(anonymous function) (ckeditor.js?ver=2.0.0:397)
(anonymous function) (ckeditor.js?ver=2.0.0:208)
m (ckeditor.js?ver=2.0.0:203)
q (ckeditor.js?ver=2.0.0:203)
r (ckeditor.js?ver=2.0.0:203)
(anonymous function) (ckeditor.js?ver=2.0.0:204)
编辑#2:
以下是出现问题的应用程序特定区域的小提琴:http://jsfiddle.net/sSaCd/3/
我在页面上使用多个CKEditor的AngularJS和jQuery UI Sortable遇到了类似的问题。基本上是一个噩梦般的设置。不确定这是否完全相关,但我想无论如何我都会分享,以防其他人遇到这个问题。这似乎是CKEditor中的一个错误(http://dev.ckeditor.com/ticket/11924?(比什么都重要。
每当 DOM 被可排序更改时,我都有破坏/重新创建 CKE 的回调(长话短说(。
我正在打电话给CKEDITOR.remove(ckInstance)
,这导致了你得到的同样的错误。
我还尝试在回调中调用调用ckInstance.destroy()
和ckInstance.destroy(true)
(以避免更新已经更改的 DOM(,但Cannot read property 'hasAttribute' of undefined
收到错误(并且Cannot read property 'clearCustomData' of null
沿线的某个地方(。
我能够通过以下方式解决此问题:
ckInstance.removeAllListeners();
CKEDITOR.remove(ckInstance);
CKEditor似乎在清理自己方面做得很糟糕,并且处理DOM更改非常糟糕(更不用说Angular了......
希望这可以节省其他人花费的荒谬时间,我花了很长时间才弄清楚:)
我在使用 Meteor 时遇到了同样的问题,并且还拥有多个 ckeditor 实例。这是反应式 DOM 加载的常见问题,其中您的应用程序已按照接收的顺序处理了 javaScript 调用,但 DOM 可能未完全加载。
为了解决这个问题,我只是用 setTimeout 阻止代码。
setTimeout(function(){
$('#content-area').ckeditor();
},100);
我把 CKEDITOR.replace 行放在一个函数里面,并在 body onload 调用该函数。
我在拉拉维尔遇到了同样的问题。CKEDITOR.replace javascript 在页面完全加载之前正在运行,因此发生了此错误。
为了确保页面完全加载,我将 CKEDITOR.replace 行放在一个函数中,并在正文加载时调用该函数
jQuery doc ready 函数为我解决了这个问题
$(document).ready(function () {
CKEDITOR.replace( 'content' );
});
我刚刚编辑了缩小的文件(在文本文件中为开发人员留下注释(,只是更改了发生错误的位置以检查空值从
&&a.ui.space("top").unselectable();
自
&&a.ui.space("top")!=null&&a.ui.space("top").unselectable();
我在两个地方这样做了。
添加到@thatgibbyguy答案中,以防不清楚。如果他的答案对你不起作用,或者返回的 ckeditor 未找到,那是因为如果你按照 laravel-ckeditor 文档安装作曲家,它就不存在函数。在这种情况下,您需要以这种方式稍微修改他的答案,它将起作用
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
setTimeout(function(){
CKEDITOR.replace( 'article-ckeditor' ); //Your selector must match the textarea ID
},400);
</script>
请注意,我将其称为供应商。查找工匠说明以将其包含在供应商的资源中。但我想它会与 CDN 安装一样工作。
看看这里的@losmescaleros答案:https://stackoverflow.com/a/25252552/13179424
简而言之:
如果不使用 .remove(( 从 DOM 中删除弹出窗口,则存在导致问题的问题
$('body').popover({
selector: '[rel=popover]',
trigger: "click"
}).on("show.bs.popover", function(e){
// hide all other popovers
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
});
尝试调用ck_editor.destroy
,其中ck_editor
是编辑器实例。出于某种原因,CKEDITOR似乎坚持使用旧实例。如果你销毁它们,错误似乎会消失。
MyView: Ember.View.extend
# Hang on to the reference for your editor
didInsertElement: ->
@set('ck_editor', CKEDITOR.replace('whatever'))
# Tear down your instanc
willDestroyElement: ->
if @get('ck_editor')
@get('ck_editor').destroy()
- 如何照顾CSRF&单页应用程序中不使用cookie的XSS攻击
- WordPress驱动的单页应用程序,具有通用JavaScript
- 绘图应用程序-单击工具更改光标
- 在非SPA(单页应用程序)中使用Require.js和Backbone
- 单页应用程序的javascript集成测试
- 如何在单页应用程序中重新绘制图像
- 如何计算angular JS应用程序(单页应用程序)的页面加载时间
- Dojo:在单页应用程序中交换两个不同的视图
- AngularJS单页应用程序中的Toggable选项卡
- 单页应用程序中的登录页面
- 在单页应用程序上进行客户端路由的正确方法是什么
- JS单页应用程序和基于PHP的登录系统
- 为持久单页应用程序创建会话超时警告
- 单页应用程序的Javascript依赖性管理
- 单页网页应用程序所需的设计建议
- backbone.js单页应用程序中的引导程序教程
- 使用jQuery Mobile构建的iOS应用程序的页脚位置不正确
- 如何对一个主要负责重定向到应用程序外部页面的Angular服务进行单元测试
- Windows 8应用程序-单点登录在应用程序-没有域名加入
- 使用ember设置web应用程序索引页的标题