javascript - PrimeNg 编辑器未显示 - Angular

Question

我听了很多教程，但到目前为止，我还没有设法让 PrimeNG 的编辑器模块显示出来! (其他模块如 Toast 或按钮工作正常，只有 Editor 不工作)。

这就是我所做的:

在 app.module.ts 中导入模块

import { EditorModule } from 'primeng/editor';

已安装的包

npm install quill --save

npm install @types/quill --save

更新的 angular-cli.json

"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ] 
"scripts": [ "../node_modules/quill/dist/quill.js" ]

以两种不同的方式插入到 HTML 中

<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>

<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>

</form>

在 TS 文件中引用它们

this.avisoForm = new FormGroup({
        msgAviso: new FormControl,
        titAviso: new FormControl
    })

text: string;

但它不会向最终用户显示任何内容，即使 p-editor 标签显示在那里:

End-User Screen

我认为这可能是 CSS 问题，但我检查了 CSS 文件，但我几乎无法检索到标签，因为它在页面中没有显示任何内容。 (我从 PrimeNG 原始网站上搜索了一个，它有一个标签，但它也不在 CSS 中)。

我已经搜索了很多资源，但我还没有找到解决该问题的任何答案，有人可以帮助我吗？谢谢!

来源:

• https://github.com/primefaces/primeng/issues/807
• PrimeNg Error: Quill is not defined
• http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/

Answer 1

刚才我为PrimeNg Editor创建了一个元素

1. 使用最新版本 6 创建了新的 Angular 元素

2. npm install primeng --save latest > 6.0.0

3. npm install quill --save

4. 编辑 angular.json。如果您的 angular.json 和 node_module 在树的同一级别，请仔细更新它。像下面这样的编辑我是这样编辑的:

   “风格”:[ “源代码/styles.scss”， “node_modules/quill/dist/quill.core.css”， “node_modules/quill/dist/quill.snow.css” ], “脚本”:[ “node_modules/quill/dist/quill.js” ]

5. 在您的模块中导入它:import {EditorModule} from 'primeng/editor';

   进口:[ HTTP模块， 表单模块， 浏览器模块， 按钮模块， 表格模块， 编辑模块 ],

6. 在任何模板中添加html <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>

7. 然后在组件文件中给 text1 一些值:string text2: 字符串;

Github repo 供引用 Git