我正在执行CRUD操作。发生什么情况,当我处于编辑路径时,我想要在editor.i上显示所有代码下方的内容。
tiny-editor.component.ts
import {
Component,
AfterViewInit,
EventEmitter,
OnDestroy,
Input,
Output
} from '@angular/core';
import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/code';
declare var tinymce: any;
@Component({
selector: 'text-editor',
templateUrl: './tiny-editor.component.html',
styleUrls: ['./tiny-editor.component.css']
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
@Input() elementId: String;
@Input() toolbar: String;
@Output() onEditorContentChange:EventEmitter<any> = new EventEmitter();
@Input() initialContent: String;
editor;
ngAfterViewInit() {
tinymce.init({
selector: '#' + this.elementId,
menubar: false,
branding: false,
plugins: ['link', 'table', 'textcolor', 'code'],
skin_url: 'assets/skins/lightgray',
toolbar : this.toolbar,
setup: editor => {
this.editor = editor;
// editor.on('keyup', () => {
// const content = editor.getContent();
// this.onEditorContentChange.emit(content);
// });
editor.on('Change', () =>{
const content = editor.getContent();
this.onEditorContentChange.emit(content);
});
},
init_instance_callback: (editor: any) => {
editor && this.initialContent && this.editor.setContent(this.initialContent)
}
});
}
setContent(_content){
this.editor.setContent(_content);
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
tiny-editor.component.html
<textarea id="{{elementId}}">{{initialContent}}</textarea>
addComponent
<text-editor #noteEditor [elementId]="'note-editor'"
(onEditorContentChange)="EditorContentChange($event)"
[toolbar]="toolbarConfig">
{{portObject.descriptionHTML}}
</text-editor>
从上方您可以看到“ portObject.descriptionHTML”是内容,我想向用户显示他们处于编辑路径时