CKEditor 5 - Angular 7：对象 ngModel 与子子项绑定问题

Question

1- 首先是我的代码：

ListPagesComponent:

export class ListPagesComponent {
    public model = {
            id: -1,
            actif: 0,
            link: '',
            htmlContent: {
                fr: '',
                en: ''
            },
            title: {
                fr: '',
                en: ''
            }
        };    
    updatePage() {
                this.model = {
                    id: -1,
                    actif: 0,
                    link: 'my-link',
                    htmlContent: {
                        fr: 'Salut tout le monde',
                        en: 'hello welcome'
                    },
                    title: {
                        fr: 'title1',
                        en: 'title2'
                    }
                };
                console.log(this.model);
            }
}

listpages.component.html - 同一页面的 CKeditors:

 <ckeditor name="content" 
    [editor]="editor1" 
    data=" " 
    (ready)="onReady($event) 
    [config]="editorConfig" 
    [(ngModel)]="model.htmlContent[langs.fr]">
    </ckeditor>

<ckeditor name="content" 
[editor]="editor1" 
data=" " 
(ready)="onReady($event)" 
[config]="editorConfig" 
[(ngModel)]="model.htmlContent[langs.en]">
</ckeditor>

2-问题解释： 当我单击执行 updatePage() 的按钮时，我希望在 console 中得到结果：正确的新值更新后的 htmlContents 的法语和英语语言，例如：

actif: 0
htmlContent:
en: "<p>hello welcome</p>"
fr: "<p>Salut tout le mond</p>" <==== THE Expected Result
id: -1
link: "my-link"
title: {fr: "title1", en: "title2"}

问题是给出的结果是：

actif: 0
htmlContent:
en: "<p>hello welcome</p>"
fr: "<p>hello welcome</p>"   <==== THE ISSUE IS HERE 
id: -1
link: "my-link"
title: {fr: "title1", en: "title2"}

我希望我的问题很清楚。

Answer 1

我解决了我的问题：老实说，我不确定它是 CKEditor5 Multi-instances cycle life bug 还是 not ，但为了解决这个问题，我刚刚创建了一个新组件以供重用，其中包含 CKEditor 组件的 one 实例，我向它传递了一个 Input/output 字符串属性以区分不同语言的内容（ FR, EN 等..)，我只是在父级中使用了这个组件，其中包含带有编辑器的模态.. 所以这是我的代码解决方案：

新增HTMLEditorComponent:

export class HTMLEditorComponent implements OnInit {
    /** Global Props **/
    public editor1 = DecoupledEditor;
    @Input() content: string;
    @Output() contentChange: EventEmitter<string> = new EventEmitter();

    langs = {
        fr: 'fr',
        en: 'en',
    };
    /** editor configuration **/
    public editorConfig = {
        placeholder: 'Ecrire votre contenu ici!',
    };

    constructor() {
    }

    ngOnInit() {
    }

    /**
     * Init Global Page Editor
     * @param editor
     */
    public onReady(editor) {
        this.initEditor(editor);
    }

    /**
     * Init editor ui & toolbar
     * @param editor
     */
    private initEditor(editor) {
        editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement(),
        );
    }

    /**
     * Update out changes
     */
    onChange() {
        console.log(this.content);
        this.contentChange.emit(this.content);
    }

其观点htmleditor.component.html:

<ckeditor name="content"
          [editor]="editor1" data=" " (ready)="onReady($event)"
          [(ngModel)]="content"
          [config]="editorConfig"
          (ngModelChange)="onChange()"
></ckeditor>

父组件ListPagesComponent :

export class ListPagesComponent implements OnInit {

// other codes here ...

/** List of available extensible langages **/
    langs = {
        fr: 'fr',
        en: 'en',
    };
/** Page Editor props **/
    page: Page = new Page();
    selectedLanguage: string = this.langs.fr;

// other codes here ...
// other codes here ...
/**
     * Modifier Page
     */
    updatePage() {
        this.showAddModal();
        //  update request
    }
// other codes here ..
// other codes here ..
}

这就是我在父 ListPagesComponent html 视图中使用 HtmlEditorComponent 的方式：

// for frensh language
<app-htmleditor [(content)]="page.htmlContent[langs.fr]"></app-htmleditor>
// for English language
<app-htmleditor [(content)]="page.htmlContent[langs.en]"></app-htmleditor>

我希望我的解决方案对 CKeditor5 的使用有好处 :)。

CKEditor 5 - Angular 7：对象 ngModel 与子子项绑定问题

CKEditor 5 - Angular 7 : object ngModel binding with sub childs problem

angular

ckeditor

angular7

angular8

ckeditor5