回答
假设你正在实施@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
你必须实施的一个包装,或尝试将现有的 https://github.com/zackarychapple/ng2-tinymce-wyswig
https://github.com/luigiinred/ng2-tinymce
或者我知道这个工程肯定的:https://github.com/chymz/ng2-ckeditor
评论我有同样的问题,并实现@nicofx答案。但是,当内容由异步http调用设置时,这并没有诀窍。
具有相同问题的人:你可以使用哪些更新时,HTTP调用已完成conent的eventemitter:
定义输入:
@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);
}
}
你也可以做得更简单一点。 只需添加文字@input在你看来,你用tinyMCE的组件:
<tinymce-editor
[desiredInitialText]="text"
(onEditorKeyup)="editorChangesHandler($event)">
</tinymce-editor>
然后在你的TinymceComponent添加
@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>
您的代码段产生错误 –
- 1. TinyMCE&Angular 2:基于@Input设置编辑器内容
- 2. 如何在编辑器初始化后在ng2-lazy-trumbowyg编辑器中设置内容? Angular 2/4
- 3. 初始化为tinyMCE textarea并在选定的tinyMCE编辑器上设置内容
- 4. 如何在ASP.NET MVC4(Razor)中设置TinyMCE编辑器的初始内容?
- 5. 如何在Tinymce Wordpress编辑器中设置父级选择标签的内容
- 6. TinyMCE图像编辑器集成
- 7. 从TinyMCE编辑器获取内容
- 8. TinyMCE编辑器内容余量
- 9. 如何设置TinyMCE的内容动态
- 10. 如何设置tinymce默认内容
- 11. 内联编辑器tinymce
- 12. 如何将Crafter CMS在线编辑与Angular 2集成?
- 13. 如何在java web应用中集成tinyMce编辑器
- 14. 如何将TinyMCE编辑器与php集成
- 15. Angular JS - 编辑内容编辑
- 16. 如何从TinyMCE编辑器中提取HTML内容
- 17. 如何防止用户修改tinymce编辑器内容。用户不应该编辑内容。如何使用angularjs
- 18. 如何设置tinymce编辑器的readonly属性为false?
- 19. 如何在Ext Js 4中设置TinyMce编辑器的高度?
- 20. 如何将照片上传与Rails3.1应用中的tinymce内容编辑器集成?
- 21. 如何以编程方式设置/编辑webview的内容
- 22. 组HTML内容的ASP.NET MVC TinyMCE的编辑内容
- 23. tinyMCE编辑器在tinyMCE容器上的边距
- 24. 如何在tinymce中制作不可编辑的模板内容
- 25. 如何使TinyMCE(富文本编辑器)成为默认的C5编辑器
- 26. 集TinyMCE的活跃编辑器成为不同
- 27. TinyMce in Angular 2
- 28. GWT设置内容编辑DIV
- 29. 将内容设置为aloha可编辑?
- 30. 滚动到TinyMCE编辑器中的特定内容
我想自己做,而不改变整个逻辑通过添加一个包装。 –
我建议实现一个自定义的tinyMCE组件,它接受一个'@ Input',呈现一个tinyMCE编辑器,并通过'@ Input'传递给Edior的值通过http://archive.tinymce.com/wiki.php/设置。 API3:method.tinymce.Editor.setContent – bergben