PrimeNg 编辑器未显示 - Angular

Question

我已经遵循了很多教程，但到目前为止，我还没有设法让 PrimeNG 的编辑器模块显示出来！（其他模块（例如 Toast 或按钮）工作正常，只是编辑器无法工作）。

所以这就是我所做的：

在 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" ]

以 2 种不同的方式插入 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 标签：

最终用户屏幕

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

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

资料来源：

• https://github.com/primefaces/primeng/issues/807
• PrimeNg 错误：未定义套筒
• http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/

Answer 1

刚才我为 PrimeNg Editor 创建了一个项目

1. 使用最新版本 6 创建了新的 Angular 项目

2. npm install primeng --保存最新版本 > 6.0.0

3. npm 安装 quill --save

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

   “样式”：[“src/styles.scss”，“node_modules/quill/dist/quill.core.css”，“node_modules/quill/dist/quill.snow.css”]，“脚本”：[“node_modules/鹅毛笔/dist/quill.js"]

5. 将其导入您的模块中：import {EditorModule} from 'primeng/editor';

   导入：[ HttpModule、FormsModule、BrowserModule、ButtonModule、TableModule、EditorModule ]、

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

7. 并在组件文件中为 text1: string text2: string; 赋予一些值

Github 存储库以供参考Git