首页 文章

Angular中的CKEditor . TypeError:在insertText之后无法读取null的属性'type'

提问于
浏览
0

我正在构建一个应用程序,我在Angular框架中使用CKEditor .

无论如何 - 一切正常,但当我试图调用函数insertText时,我有以下错误:

edit.html:180错误TypeError:无法读取(ckeditor.js:139)属性'type'的位于CKEDITOR.dom.range.createBookmark2(ckeditor.js:141)的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)at一个 . (ckeditor.js:1072)at a(ckeditor.js:10)a.CKEDITOR.event.CKEDITOR.event.fire(ckeditor.js:12)at a.CKEDITOR.editor.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 ERROR CONTEXT DebugContext {view:Object,nodeIndex: 137,nodeDef:Object,elDef:Object,elView:Object} component:(...)componentRenderElement:(...)context:(...)elDef:ObjectelOrCompView:(...)elView:Objectinjector :( . ..)nodeDef:ObjectnodeIndex:137p roviderTokens:(...)引用:(...)renderNode:(...)view:Object__proto__:Objectcomponent:(...)componentRenderElement:(...)context:(...)elOrCompView :( . ...)inject:(...)logError:function(console)providerTokens:(...)references:(...)renderNode:(...)constructor:function DebugContext_(view,nodeIndex)get component:function ()get componentRenderElement:function()get context:function()get elOrCompView:function()get injector:function()get providerTokens:function()get reference:function()get renderNode:function()proto:Object 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

这是我的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>

我的editComponent TypeScript的一部分:

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
                    }
                }
            }(),

在此先感谢您的帮助!

1 回答

  • 0

    我已经通过修改选择器并在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>
    

相关问题