Question

通过NgFor通过angular@2.0.0-alpha.44动态添加CKEditors rendred，我遇到了问题。

@Directive({
    selector: 'textarea'
})
class CKEditor {
    constructor(_elm: ElementRef) {
        CKEDITOR.replace(_elm.nativeElement);
    }
}

@Component({
    selector: 'my-app',
})
@View({
    directives: [NgFor, CKEditor],
    template: `
      <div *ng-for="#item of items">
        {{ item }}: <textarea>{{ item }}</textarea>
      </div>
      <button (click)="addItem()">Add</button>`
})
class AppComponent {
    items = ['default_0', 'default_1'];

    constructor() {
        this.addItem();
    }

    addItem() {
        var id = 'ckeditor_inst_' + this.items.length;
        this.items.push(id);
    }
}

您可以看到三个正常工作的CKEditor。然后单击底部的“添加”按钮，它会以一种你甚至可以写入它的方式打破容器中的最后一个CKEditor，如果按下任何工具栏按钮，它会抛出：

Uncaught TypeError: Cannot read property 'getSelection' of undefined。

有趣的是，只有最后一个CKEditor被破坏，另外两个才有效。似乎Angular2以某种方式操纵了最后一个打破CKEditor的元素。

我记得在angular@2.0.0-alpha.35中使用相同的方式添加新的CKEditor，我觉得它在那里工作但也许我没注意到。版本angular@2.0.0-alpha.47 is the same。

Answer 1

由于wysiwygarea插件，您的集成使用Classic CKEditor，可以在<iframe>中进行编辑（即避免与网页发生CSS冲突）。

这种实现的缺点是，一旦从DOM中分离（并重新附加）此类<iframe>（每次添加新的item时都会像Angular一样），其内部{{1}得到＆＃34;破坏＆＃34;。破坏我的意思是document从头开始加载，丢失你的内容，CKEditor引导程序代码，JS引用等等，并最终使整个编辑器实例无用。

问题在于呈现此视图的方式：

document.body

我看到了解决这个问题的三个方法：

清洁解决方案：强制Angular在添加新项目时不重新呈现整个@View({ directives: [NgFor, CKEditor], template: ` <div *ng-for="#item of items"> {{ item }}: <textarea>{{ item }}</textarea> </div> <button (click)="addItem()">Add</button>` })集合。
棘手的解决方案：使用Inline CKEditor，它在items div而不是<div contenteditable="true" />中工作，并且对DOM中的突变免疫。
懒惰和缓慢解决方案：坚持当前集成但在添加新项目之前销毁所有<iframe>...<body contenteditable="true" /></iframe>（CKEDITOR.instances），然后重新初始化它们instance.destroy()。

Answer 2

此问题已在beta-15中修复，请参阅：

http://plnkr.co/edit/X5whPqDhLS6RjTR2N8hT?p=preview

Angular2和动态添加的CKEditors中断

2 个答案: