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 标记显示在那里：

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

需要将 quill 的资源添加到您的应用程序中。使用 CLI 的示例设置如下；

npm install quill --save

将 Quill 添加到 angular.json

中的脚本

"scripts": [... "node_modules/quill/dist/quill.js"],

将 Quill css 添加到 angular.json

中的样式

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

我已经用新的 angular 7 和现有项目多次检查了这个解决方案，它就像魅力一样 :)

Answer 2

刚才我为 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 位于同一级别的树，请仔细更新。下面的编辑我是这样编辑的：

   “样式”：[ "src/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. 在任意模板<p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>中添加html

7. 并在组件文件中为 text1 赋予一些值：字符串 text2: 字符串；

Github repo 供参考Git