angular2 所见即所得的 tinymce 实现和 2 向绑定
angular2 wysiwyg tinymce implementation and 2-way-binding
您好,我正在尝试将 tinymce 实现到 angular 2 组件中,供小型论坛创建新线程。
我希望将 textarea (tinymce) 的内容双向绑定到组件内的变量。到目前为止,提交按钮有效,但 keyup 事件无效。
export class ForumNewThreadComponent implements OnInit{
constructor(){}
ngOnInit():any {
tinymce.init(
{
selector: ".tinyMCE",
})
}
text:string;
submit(){
this.text = tinymce.activeEditor.getContent();
}
getTinymceContent(){
this.text = tinymce.activeEditor.getContent();
}
}
并查看
<div class="thread-body">
{{getValue}}
<textarea class="tinyMCE" style="height:300px" (keyup)="getTinymceContent()">
</textarea>
<button class="btn btn-primary" (click)="submit()">Submit</button>
</div>
我会为此实现自定义值访问器:
const TINY_MCE_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TinyMceValueAccessor), multi: true});
@Directive({
selector: 'textarea[tinymce]',
host: { '(keyup)': 'doOnChange($event.target)' },
providers: [ TINY_MCE_VALUE_ACCESSOR ]
})
export class DateValueAccessor extends DefaultValueAccessor {
@Input()
tinymce:any;
onChange = (_) => {};
onTouched = () => {};
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value.toString());
}
}
doOnChange(elt) {
this.onChange(this.tinymce.activeEditor.getContent());
}
}
我会这样使用它:
<textarea [tinymce]="tinymce" style="height:300px" [(ngModel)]="text">
</textarea>
在你的组件中 class:
@Component({
(...)
directives: [ DateValueAccessor ]
})
export class ForumNewThreadComponent implements OnInit{
constructor(){}
ngOnInit():any {
tinymce.init({
selector: "[tinymce]"
})
}
text:string;
}
或者这样做,使用 tmce 的更改事件和 NgZone
constructor(public zone:NgZone) {}
ngOnInit():any {
tinymce.init(
{
selector: ".tinyMCE",
setup: (ed) => {
ed.on('keyup change', (ed, l) => {
this.zone.run(()=> {
this.text = tinymce.activeEditor.getContent();
});
});
}
})
}
一旦您在一个组件中的 tmce 上有多个实例,这将失败。
将此逻辑放入指令中,例如 Thierry 的实现。
我知道这有点旧post。但是在挠头超过2天之后。我终于能够弄清楚这一点,并认为这可能对其他人有用。所以在这里分享
我想说我做了与上述相同的实现,但我遇到了这个奇怪的错误并四处乱撞修复了这个 'cannot modify NodeName of Null'
的错误,所以今天终于修复了错误并且我想分享它,这样人们就不必再搜索它可能是什么错误了。我知道这是一个旧的 post 对此我深表歉意。
- 获取github(指令)的代码。 link 下面。
谢谢@Abhijith Nagaraja post.
2。
向指令添加两个变量
private editor;
private init: boolean = false;
重写方法
writeValue(value: any): void {
// ...
}
至
writeValue(value: any): void {
// This check is necessary because, this method gets called before editor gets initialised.
// Hence undefined/null pointer exceptions gets thrown
if (this.init) {
if (tinymce.get(this.selector)) {
tinymce.get(this.selector).setContent(value, {format: 'raw'});
}
}
}
替换为 ValueOnChange(change: boolean)
this.val = tinymce.activeEditor.getContent();
至
if (tinymce.activeEditor) {
this.val = tinymce.activeEditor.getContent();
}
改写 tinymce.init(options)
至
tinymce.init(options).then(() => {
this.init = true;
});
最后添加一个ngOnDestroy
方法
ngOnDestroy() {
tinymce.remove(this.editor);
}
这已经为我修复了错误,也为我修复了编辑器已经初始化并且我重用它时无法编译的问题。但现在因为 ngOnDestroy
我现在可以销毁编辑器并且 afterViewInit
会召回 tinymce.init
您好,我正在尝试将 tinymce 实现到 angular 2 组件中,供小型论坛创建新线程。 我希望将 textarea (tinymce) 的内容双向绑定到组件内的变量。到目前为止,提交按钮有效,但 keyup 事件无效。
export class ForumNewThreadComponent implements OnInit{
constructor(){}
ngOnInit():any {
tinymce.init(
{
selector: ".tinyMCE",
})
}
text:string;
submit(){
this.text = tinymce.activeEditor.getContent();
}
getTinymceContent(){
this.text = tinymce.activeEditor.getContent();
}
}
并查看
<div class="thread-body">
{{getValue}}
<textarea class="tinyMCE" style="height:300px" (keyup)="getTinymceContent()">
</textarea>
<button class="btn btn-primary" (click)="submit()">Submit</button>
</div>
我会为此实现自定义值访问器:
const TINY_MCE_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TinyMceValueAccessor), multi: true});
@Directive({
selector: 'textarea[tinymce]',
host: { '(keyup)': 'doOnChange($event.target)' },
providers: [ TINY_MCE_VALUE_ACCESSOR ]
})
export class DateValueAccessor extends DefaultValueAccessor {
@Input()
tinymce:any;
onChange = (_) => {};
onTouched = () => {};
writeValue(value:any):void {
if (value!=null) {
super.writeValue(value.toString());
}
}
doOnChange(elt) {
this.onChange(this.tinymce.activeEditor.getContent());
}
}
我会这样使用它:
<textarea [tinymce]="tinymce" style="height:300px" [(ngModel)]="text">
</textarea>
在你的组件中 class:
@Component({
(...)
directives: [ DateValueAccessor ]
})
export class ForumNewThreadComponent implements OnInit{
constructor(){}
ngOnInit():any {
tinymce.init({
selector: "[tinymce]"
})
}
text:string;
}
或者这样做,使用 tmce 的更改事件和 NgZone
constructor(public zone:NgZone) {}
ngOnInit():any {
tinymce.init(
{
selector: ".tinyMCE",
setup: (ed) => {
ed.on('keyup change', (ed, l) => {
this.zone.run(()=> {
this.text = tinymce.activeEditor.getContent();
});
});
}
})
}
一旦您在一个组件中的 tmce 上有多个实例,这将失败。 将此逻辑放入指令中,例如 Thierry 的实现。
我知道这有点旧post。但是在挠头超过2天之后。我终于能够弄清楚这一点,并认为这可能对其他人有用。所以在这里分享
我想说我做了与上述相同的实现,但我遇到了这个奇怪的错误并四处乱撞修复了这个 'cannot modify NodeName of Null'
的错误,所以今天终于修复了错误并且我想分享它,这样人们就不必再搜索它可能是什么错误了。我知道这是一个旧的 post 对此我深表歉意。
- 获取github(指令)的代码。 link 下面。 谢谢@Abhijith Nagaraja post.
2。 向指令添加两个变量
private editor;
private init: boolean = false;
重写方法
writeValue(value: any): void {
// ...
}
至
writeValue(value: any): void {
// This check is necessary because, this method gets called before editor gets initialised.
// Hence undefined/null pointer exceptions gets thrown
if (this.init) {
if (tinymce.get(this.selector)) {
tinymce.get(this.selector).setContent(value, {format: 'raw'});
}
}
}
替换为 ValueOnChange(change: boolean)
this.val = tinymce.activeEditor.getContent();
至
if (tinymce.activeEditor) {
this.val = tinymce.activeEditor.getContent();
}
改写 tinymce.init(options)
至
tinymce.init(options).then(() => {
this.init = true;
});
最后添加一个ngOnDestroy
方法
ngOnDestroy() {
tinymce.remove(this.editor);
}
这已经为我修复了错误,也为我修复了编辑器已经初始化并且我重用它时无法编译的问题。但现在因为 ngOnDestroy
我现在可以销毁编辑器并且 afterViewInit
会召回 tinymce.init