Tinymce Angular 2集成:如何设置编辑器的内容? [英] Tinymce Angular 2 integration : how to set the content of the editor?

问题描述

我将TinyMCE集成到我的angular 2应用程序中，并且运行完美.现在，我想传递一个@Input属性，以便可以设置编辑器的默认内容.

I TinyMCE integrated into my angular 2 application and it works perfectly. Now i would like to pass an @Input property so that in can set the default content of the editor.

有什么主意吗?

推荐答案

假设您正在按照添加一个额外的 @Input 参数:

@Input() initialContent: String;

您必须在 ngAfterViewInit()中放置 tinymce.init({})对象，其中包含编辑器配置和运行时选项.在这里，您还必须添加新功能:

In the ngAfterViewInit() you have to place the tinymce.init({}) object with the editor configuration and runtime options. It's there where you also have to add a new function:

        init_instance_callback: (editor: any) => {
            editor && this.initialContent && this.editor.setContent(this.initialContent)
        },

最后，在调用指令时，必须添加一个新属性，该属性的名称与在 @Input 参数中使用的名称与在该指令的定义中使用的名称相同.

Finally, when you are calling the directive you have to add a new attribute with the same name as you used in the @Input parameter than you used in the definition of the directive.

<textarea class="form-control" id="wysiwygText" name="body" rows="3" [htmlEditor] initialContent="{{model.body}}" [(ngModel)]="model.body" #body="ngModel" (onEditorKeyup)="keyupHandlerFunction($event)"></textarea>

此实现基于本文的评论

这篇关于Tinymce Angular 2集成:如何设置编辑器的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！