CKEditor in Angular.类型错误： 插入文本后无法读取 null 的属性'type'

Question

我正在构建一个应用程序，其中我在 Angular 框架中使用 CKEditor。

无论如何 - 一切正常，但是当我尝试调用函数insertText时，我遇到以下错误：

编辑.html：180

错误类型错误： 无法读取 null 的属性"类型" 在 (ckeditor.js：139) at CKEDITOR.dom.range.createBookmark2 (ckeditor.js：141) at Array.createBookmarks2 (ckeditor.js：487) at CKEDITOR.dom.selection.createBookmarks2 (ckeditor.js：440) at CKEDITOR.plugins.undo.Image (ckeditor.js：1081) at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js：1076) 在 A. (ckeditor.js：1072) 上午(CKEDITOR.js：10) at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js：12) at a.CKEDITOR.CKEDITOR.editor.fire (ckeditor.js：13) View_PageEditComponent_3 @ edit.html：180 DebugContext_.logError @ services.ts：571 ErrorHandler.handleError @ error_handler.ts：69 next @ application_ref.ts：366 schedulerFn @ event_emitter.ts：96 SafeSubscriber.__tryOrUnsub @ Subscriber.ts：252 SafeSubscriber.next @ Subscriber.ts：204 Subscriber._next @ Subscriber.ts：135 Subscriber.next @ Subscriber.ts：95 Subject.next @ Subject.ts：61 EventEmitter.emit @ event_emitter.ts：78 NgZone.triggerError @ ng_zone.ts：87 onHandleError @ ng_zone.ts：283 ZoneDelegate.handleError @ zone.js：385 Zone.runTask @ zone.js：184 ZoneTask.invoke @ zone.js：476

错误上下文 DebugContext_ {view： Object， nodeIndex： 137， nodeDef： Object， elDef： Object， elView： Object}component： (...)componentRenderElement： (...)上下文：(...elDef： ObjectelOrCompView： (...)elView： Objectinjector： (...)nodeDef： ObjectnodeIndex： 137providerTokens： (...)参考资料： (...渲染节点： (...)视图： Object__proto__： 对象组件： (...)componentRenderElement： (...)上下文：(...elOrCompView： (...)喷油器：(...日志错误： 函数(控制台)提供程序令牌： (...)参考资料： (...渲染节点：(...)构造函数：函数 DebugContext_(view， nodeIndex)get component： function ()get componentRenderElement： function ()get context： function ()get elOrCompView： function ()get injector： function ()get providerTokens： 函数 ()get references： function ()get renderNode： function ()原型：对象View_PageEditComponent_3@编辑.html：180 DebugContext_.logError @ services.ts：571 ErrorHandler.handleError @ error_handler.ts：69 下一页 @ application_ref.ts：366 调度程序Fn @ event_emitter.ts：96 SafeSubscriber.__tryOrUnsub @ 订阅者.ts：252 SafeSubscriber.next @ Subscriber.ts：204 Subscriber._next @ Subscriber.ts：135 Subscriber.next @ Subscriber.ts：95 Subject.next @ Subject.ts：61 EventEmitter.emit @ event_emitter.ts：78 NgZone.triggerError @ ng_zone.ts：87 onHandleError @ ng_zone.ts：283 ZoneDelegate.handleError @ zone.js：385 Zone.runTask @ zone.js：184 ZoneTask.invoke @ zone.js：476

这是我的 CKEditor 选择器：

<ckeditor
name="content"
id="content"
[(ngModel)]="page.content"
debounce="500"
[config]="{
skins: 'minimalist',
allowedContent: true,
extraPlugins: 'divarea',
contentsCss: CKECSS
}"
(ready)="setCkeObject($event)"
(focus)="setCkeObject($event)"
(blur)="setCkeObject($event)"
#ckeEditor
>
</ckeditor>

以及我的编辑组件打字脚本的一部分：

setCkeObject($event) {
this.ckeObject = $event;
}
insert_shortcode(shortcode) {
if (this.ckeObject != null && this.ckeObject.editor != null) {
this.ckeObject.editor.insertText(shortcode);
this.alertService.addAlert('success', 'alerts.file_added_at_the_content_cursor_position');
} else {
this.page.content += shortcode;
this.alertService.addAlert('warning', 'alerts.sorry_something_gone_wrong');
}
}

问题是，有时它可以正常工作，有时则不工作。

来自 ckeditor 的代码.js导致此问题(第 6 行)：

createBookmark2: function() {
function a(b) {
var e = b.container, d = b.offset, f;
f = e;
var g = d;
f = f.type != CKEDITOR.NODE_ELEMENT || 0 === g || g == f.getChildCount() ? 0 : f.getChild(g - 1).type == CKEDITOR.NODE_TEXT && f.getChild(g).type == CKEDITOR.NODE_TEXT;
f && (e = e.getChild(d - 1),
d = e.getLength());
if (e.type == CKEDITOR.NODE_ELEMENT && 0 < d) {
a: {
for (f = e; d--; )
if (g = f.getChild(d).getIndex(!0),
0 <= g) {
d = g;
break a
}
d = -1
}
d += 1
}
if (e.type == CKEDITOR.NODE_TEXT) {
f = e;
for (g = 0; (f = f.getPrevious()) && f.type == CKEDITOR.NODE_TEXT; )
g += f.getText().replace(CKEDITOR.dom.selection.FILLING_CHAR_SEQUENCE, "").length;
f = g;
e.getText() ? d += f : (g = e.getPrevious(c),
f ? (d = f,
e = g ? g.getNext() : e.getParent().getFirst()) : (e = e.getParent(),
d = g ? g.getIndex(!0) + 1 : 0))
}
b.container = e;
b.offset = d
}
function b(a, c) {
var e = c.getCustomData("cke-fillingChar");
if (e) {
var d = a.container;
e.equals(d) && (a.offset -= CKEDITOR.dom.selection.FILLING_CHAR_SEQUENCE.length,
0 >= a.offset && (a.offset = d.getIndex(),
a.container = d.getParent()))
}
}
var c = CKEDITOR.dom.walker.nodeType(CKEDITOR.NODE_TEXT, !0);
return function(c) {
var d = this.collapsed
, f = {
container: this.startContainer,
offset: this.startOffset
}
, g = {
container: this.endContainer,
offset: this.endOffset
};
c && (a(f),
b(f, this.root),
d || (a(g),
b(g, this.root)));
return {
start: f.container.getAddress(c),
end: d ? null : g.container.getAddress(c),
startOffset: f.offset,
endOffset: g.offset,
normalized: c,
collapsed: d,
is2: !0
}
}
}(),

提前感谢您的帮助！

Answer 1

我通过修改选择器并在准备好时仅设置 CKEditor 对象一次对其进行了排序。

<ckeditor
name="content"
id="content"
[(ngModel)]="page.content"
debounce="500"
[config]="{
skins: 'minimalist',
allowedContent: true,
extraPlugins: 'divarea',
contentsCss: CKECSS
}"
(ready)="setCkeObject($event)"
#ckeEditor
>
</ckeditor>