我将TinyMCE集成到我的angular 2应用程序中,它完美地运行。现在我想传递一个@Input属性,以便可以设置编辑器的默认内容。
任何的想法 ?
假设你正在实施@Directive
中解释的TinyMCE official documentation:
添加额外的@Input
参数:
@Input() initialContent: String;
在ngAfterViewInit()
中,您必须使用编辑器配置和运行时选项放置tinymce.init({})
对象。在那里你还需要添加一个新功能:
init_instance_callback: (editor: any) => {
editor && this.initialContent && this.editor.setContent(this.initialContent)
},
最后,当您调用该指令时,您必须添加一个与您在@Input
参数中使用的名称相同的新属性,而不是在该指令的定义中使用。
<textarea class="form-control" id="wysiwygText" name="body" rows="3" [htmlEditor] initialContent="{{model.body}}" [(ngModel)]="model.body" #body="ngModel" (onEditorKeyup)="keyupHandlerFunction($event)"></textarea>
此实现基于this article的评论
我遇到了同样的问题并实现了@nicofx的答案。但是当内容由异步http调用设置时,这并没有成功。
对于具有相同问题的人:您可以使用eventemitter在http调用结束时更新内容:
定义输入:
@Input() contentEvent: EventEmitter<string>;
订阅eventemitter如果通过:
ngAfterViewInit() {
tinymce.init({
selector: '#' + this.elementId,
plugins: ['link', 'paste', 'table'],
skin_url: '/assets/skins/lightgray',
setup: editor => {
this.editor = editor;
if (this.contentEvent) {
this.contentEvent.subscribe(c => {
this.setContent(editor, c);
});
}
}
});
}
和setcontent函数:
private setContent(editor, content) {
if (editor && content) {
this.editor.setContent(content);
}
}
你必须为它实现一个包装器,或者尝试现有的https://github.com/zackarychapple/ng2-tinymce-wyswig https://github.com/luigiinred/ng2-tinymce
或者我知道这肯定有效:https://github.com/chymz/ng2-ckeditor
你也可以做一点简单。只需在您使用tinyMCE组件的视图中添加@Input文本:
<tinymce-editor
[desiredInitialText]="text"
(onEditorKeyup)="editorChangesHandler($event)">
</tinymce-editor>
然后在你的Tinymce组件中添加
@Input() desiredInitialText: string //Or any other special typing
...
ngOnChanges() {
if (this.editor) {
if (this.desiredInitialText && this.desiredInitialText.length > 0) {
this.editor.setContent(this.desiredInitialText)
} else {
this.editor.setContent('');
}
}
}
这可能会有所帮助
import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter, ElementRef, provide, forwardRef, View } from 'angular2/core';
import { RdComponent, RdLib } from '../../../../../node_modules/mulberry/core';
declare let tinymce: any;
@Component({
selector: 'aril-mail-template',
template: `<textarea style="height:15em"><p>{{model}}</p></textarea>`
})
export class MailTemplatesComponent extends RdComponent {
@Input("rd-model") model;
@Input("rd-default") default;
@Input("rd-required") required;
@Output("mail-template-save") mailTemplateSave: EventEmitter<any> = new EventEmitter<any>();
editor;
ngOnInit() {
let that = this;
tinymce.init({
selector: 'textarea',
height: "25em",
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen hr',
'insertdatetime media table contextmenu paste spellchecker',
'wordcount'
],
toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image spellchecker code',
table_toolbar: "tableprops cellprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol",
powerpaste_allow_local_images: true,
powerpaste_word_import: 'prompt',
powerpaste_html_import: 'prompt',
spellchecker_language: 'en',
spellchecker_dialog: true,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
setup: editor => {
this.editor = editor;
editor.on('init', () => {
this.model && this.editor.setContent(this.model, {format: 'raw'});
});
editor.on('change', () => {
const content = editor.getContent();
this.mailTemplateSave.emit(content);
});
}
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
<rd-service-provider #saveMailTemplateProvider [rd-service-proxy]="serviceProxy" (rd-success)="toastr.info(translate('Mail Şablonu Başarıyla Oluşturuldu.'));close()"></rd-service-provider>
<aril-mail-template [(rd-model)]="data.MailContent" (mail-template-save)="mailContent = $event" [rd-required]="true"></aril-mail-template>
<rd-footer>
<rd-submit [rd-text]="translate('Save')" rd-size="medium" (rd- click)="saveMailTemplateProvider.call(saveMailTemplates($event, mailContent))"></rd-submit>
</rd-footer>