gpt4 book ai didi

angular - TinyMCE 在 Angular-Cli 项目中不工作

转载 作者:太空狗 更新时间:2023-10-29 19:34:57 24 4
gpt4 key购买 nike

我需要在我正在处理的 Angular 2 项目中实现一个文本编辑器,以允许用户根据自己的自定义添加帖子。经过研究,我找到了TinyMCE。我已经按照文档进行了操作,并按照说明进行了设置,但是编辑器没有出现。我正在使用 angular-cli。我查看了Github 上的示例,我的代码似乎没有任何问题,但不知何故,编辑器不会出现。我得到的只是一个空白的文本框。

根据文档,这是我到目前为止所做的。

npm install tinymce --save

这是我的 angular-cli.json 文件:

"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 的组件中:

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);
}

}

我已将皮肤复制到 Assets 文件夹。

这就是我在父组件中调用这个组件的方式:

<app-writer [elementId]="editor" (onEditorKeyUp)="EditorKeyUpHandler($event)" [text]="hithere"></app-writer>

但是,我得到的只是一个文本框。这与您使用原始 html 获得的文本区域相同。我没有收到任何错误,我也没有退出。感谢您的帮助...

最佳答案

您看起来已经正确地完成了实现。您不需要 ngOnInit() 中的调试器,因为它仅用于测试目的。 (据我所知)

确保为 [elementId]="editor" 传递一些唯一值

然后尝试一下。

[text]=""中解析任何你想在所见即所得中显示的文本(这可能是来自后端的数据)

你的代码 -

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);
});
}

将此更改为 -

setup: editor => {
this.editor = editor;
editor.on('keyup', () => {
const content = editor.getContent();
this.onEditorKeyup.emit(content);
});
}

writer.component.html -

<textarea id="{{elementId}}"> {{text}} </textarea>

从组件中,您正在调用应用程序编写器,您可以通过这样的函数跟踪更改...

EditorKeyUpHandler(event) {
console.log(event);
// ......
}

这就是我在阅读他们的文档后设法完成它的方法。

引用 - https://www.tinymce.com/docs/integrations/angular2/

关于angular - TinyMCE 在 Angular-Cli 项目中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41522036/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com