Angular5 引入TinyMCE富文字編輯器
阿新 • • 發佈：2019-02-10
editor;
ngAfterViewInit() {
if (this.editor) return;
tinymce.init({
selector: '#post_editor',
language: 'zh_CN',
plugins: [
'advlist autolink lists link charmap print preview hr anchor pagebreak media',
'searchreplace wordcount visualblocks visualchars code fullscreen ',
'insertdatetime nonbreaking save table contextmenu directionality ',
'paste textcolor colorpicker textpattern'
],
toolbar1: ' fullscreen insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ',
toolbar2: 'print preview | forecolor backcolor media ',
height:"480",
image_advtab: true,
menubar: true,
setup: editor => {
this.editor = editor;
editor.on('keyup change', () => {
const content = editor.getContent();
// this.onEditorContentChange.emit(content);
console.log("繫結按下事件",content);
});
}
});
ngAfterViewInit() {
if (this.editor) return;
tinymce.init({
selector: '#post_editor',
language: 'zh_CN',
plugins: [
'advlist autolink lists link charmap print preview hr anchor pagebreak media',
'searchreplace wordcount visualblocks visualchars code fullscreen ',
'insertdatetime nonbreaking save table contextmenu directionality ',
'paste textcolor colorpicker textpattern'
],
toolbar1: ' fullscreen insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ',
toolbar2: 'print preview | forecolor backcolor media ',
height:"480",
image_advtab: true,
menubar: true,
setup: editor => {
this.editor = editor;
editor.on('keyup change', () => {
const content = editor.getContent();
// this.onEditorContentChange.emit(content);
console.log("繫結按下事件",content);
});
}
});