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

以两种不同的方式插入 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 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. 在任何模板中添加html

   <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
   <p>Value: {{text1||'empty'}}</p>

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

Github 存储库供参考 Git

Answer 2

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

npm 安装 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 3

如果您按照步骤操作，但未能按预期显示 PrimeNG 的编辑器，请验证文件夹 “node_modules/quill/dist/”中是否存在 quill.core.css 和 quill.snow.css

如果是，请尝试将这些文件导入到 style.scss 文件中，如下所示：

@import url(../node_modules//quill/dist/quill.snow.css);
@import url(../node_modules//quill/dist/quill.core.css);

我确信它会起作用，

Answer 4

NG Prime v14 除了脏话所说的之外，您还必须将“EditorModule”添加到 app.module.ts 中。我一直在努力让它发挥作用，并添加导入使其成功。