TinyMCE 在 Angular-Cli 项目中不起作用 [英] TinyMCE Not Working in Angular-Cli Project
问题描述
我需要在我正在处理的 angular 2 项目中实现一个文本编辑器,以允许用户根据自己的自定义添加帖子.经过研究,我找到了 TinyMCE.我已经按照文档进行了操作,并按照说明进行了设置,但是编辑器没有出现.我正在使用 angular-cli.我查看了 Github 上的示例,我的代码似乎没有任何问题,但不知何故,编辑器不会出现.我得到的只是一个空白的 textarea 框.
I need to implement a text editor in an angular 2 project I'm working on to allow users add posts according to their own customization. After research, I found TinyMCE. I have followed the docs, and setup as described, but the editor doesn't show up. I am using angular-cli. I have looked up at examples on Github, there seems to be nothing wrong with my code, but somehow, the editor won't show up. All I get is a blank textarea box.
根据文档,这是我迄今为止所做的.
This is what I have done so far according to the docs.
npm install tinymce --save
这是我的 angular-cli.json 文件:
This is my angular-cli.json file:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/semantic-ui/dist/semantic.min.js",
"../node_modules/tinymce/tinymce.js",
"../node_modules/tinymce/themes/modern/theme.js",
"../node_modules/tinymce/plugins/link/plugin.js",
"../node_modules/tinymce/plugins/paste/plugin.js",
"../node_modules/tinymce/plugins/table/plugin.js",
"scripts.js"
]
在我名为 writer 的组件中:
In my component called writer:
import {Component, OnInit, AfterViewInit, OnDestroy, Input, Output, EventEmitter} from "@angular/core";
declare const tinymce: any;
@Component({
selector: 'app-writer',
templateUrl: './writer.component.html',
styleUrls: ['./writer.component.css']
})
export class WriterComponent implements AfterViewInit, OnDestroy, OnInit {
@Input() elementId: string;
@Input() text: string;
@Output() onEditorKeyUp = new EventEmitter<any>();
editor;
constructor() {
}
ngOnInit() {
debugger;
if (!this.text) {
this.text = '';
}
}
ngAfterViewInit(): void {
console.log('Initializing instance of tinymce!!');
// debugger;
tinymce.init({
selector: '#' + this.elementId,
height: 500,
schema: 'html5',
plugins: ['link', 'paste', 'table'],
skin_url: 'assets/skins/lightgray',
toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify ' +
'styleselect bullist numlist outdent blockquote undo redo removeformat subscript superscript | code',
setup: editor => {
this.editor = editor;
editor.on('init', ed => {
ed.target.setContent(this.text);
console.log('editor initialized');
});
editor.on('blur', () => {
const content = editor.getContent();
this.onEditorKeyUp.emit(content);
});
},
});
}
ngOnDestroy(): void {
tinymce.remove(this.editor);
}
}
我已将皮肤复制到资产文件夹.
I have copied the skins to the assets folder.
这就是我在父组件中调用这个组件的方式:
And this is how I have called this component in the parent component:
<app-writer [elementId]="editor" (onEditorKeyUp)="EditorKeyUpHandler($event)" [text]="hithere"></app-writer>
然而,我得到的只是一个文本框.这与您使用原始 html 获得的 textarea 相同.我没有收到任何错误,我也没有收到.感谢您的帮助...
However, all I get is a textbox. This is the same textarea you get with raw html.. I am not getting any error, I am not getting the out also. Thanks for your help...
推荐答案
我在 angular 2 中遇到了这个问题.就我而言
I had this problem in angular 2. In my case I had
[elementId]="my-editor-id" (onEditorKeyup)="onBodyTextEditorKeyUp($event)"
然后我改成
[elementId]="'my-editor-id'" (onEditorKeyup)="onBodyTextEditorKeyUp($event)"
如你所见,我只是改变了:
As You see, I only changed:
"my-editor-id" ---> "'my-editor-id'"
而且它工作正常!!!
这篇关于TinyMCE 在 Angular-Cli 项目中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!