Angular 中的 CKEditor。 TypeError:插入文本后无法读取 null 的属性“类型”

Posted

技术标签:

【中文标题】Angular 中的 CKEditor。 TypeError:插入文本后无法读取 null 的属性“类型”【英文标题】:CKEditor in Angular. TypeError: Cannot read property 'type' of null after insertText 【发布时间】:2017-11-15 12:47:33 【问题描述】:

我正在构建一个在 Angular 框架内使用 CKEditor 的应用程序。

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

edit.html:180

错误类型错误:无法读取 null 的属性“类型” 在 (ckeditor.js:139) 在 CKEDITOR.dom.range.createBookmark2 (ckeditor.js:141) 在 Array.createBookmarks2 (ckeditor.js:487) 在 CKEDITOR.dom.selection.createBookmarks2 (ckeditor.js:440) 在 CKEDITOR.plugins.undo.Image (ckeditor.js:1081) 在 CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1076) 在一个。 (ckeditor.js:1072) 上午 (ckeditor.js:10) 在 a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12) 在 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 下一个@ application_ref.ts:366 schedulerFn @ event_emitter.ts:96 SafeSubscriber.__tryOrUnsub @ Subscriber.ts:252 SafeSubscriber.next @ 订阅者.ts:204 订阅者._next @ 订阅者.ts:135 订阅者.下一个 @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_ 视图:对象,节点索引:137,节点定义: 对象,elDef:对象,elView:对象组件: (...)componentRenderElement: (...)context: (...)elDef: ObjectelOrCompView: (...)elView: Objectinjector: (...)nodeDef: ObjectnodeIndex: 137providerTokens: (...)references: (...)renderNode: (...)view: Object__proto__: Objectcomponent: (...)componentRenderElement: (...)context: (...)elOrCompView: (...)injector: (...)logError: function (console)providerTokens: (...)references: (...)renderNode: (...)constructor: function DebugContext_(view, nodeIndex)get 组件:function()get 组件渲染元素:函数()获取上下文:函数()获取 elOrCompView: function ()get injector: function ()get providerTokens: 函数()获取参考:函数()获取渲染节点:函数 ()proto:对象View_PageEditComponent_3@edit.html:180 DebugContext_.logError@services.ts:571 ErrorHandler.handleError@ error_handler.ts:69 下一个 @ 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】:

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

【讨论】:

以上是关于Angular 中的 CKEditor。 TypeError:插入文本后无法读取 null 的属性“类型”的主要内容,如果未能解决你的问题,请参考以下文章

“ng2-CKEditor”节点模块不适用于打字稿[Angular2]

如何从 CKEditor 5 中的插入事件中获取文本?

angular2 学习笔记 ( 第3方插件 jQuery and ckeditor )

CKEDITOR5 - Angular8:TypeError:this.editor.create 不是函数

angular+ckeditor最后上传的最后一张图片不会被添加(bug)

CKEditor 未显示在 Angular Boilerplate 项目中