Question

我已经看了很多教程，但是到目前为止，我还没有设法使PrimeNG的Editor模块显示出来！（其他模块（例如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标签，它也没有向最终用户显示任何内容：

End-User Screen

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

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

来源：

Answer 1

现在我为PrimeNg Editor创建了一个项目

使用最新版本6创建新的角度项目
npm install primeng-保存最新> 6.0.0
npm install quill --save
编辑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” ]
将其导入您的模块中：import {EditorModule} from 'primeng/editor';

进口：[ HttpModule，表格模块 BrowserModule， ButtonModule，表格模块编辑器模块 ]
在任何模板<p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>
并在组件文件中为text1提供一些值：字符串 text2：字符串；

Github仓库供参考Git

Answer 2

主轴的资源需要添加到您的应用程序中。使用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和现有项目多次检查了此解决方案，它的工作方式就像charm：）

PrimeNg编辑器未显示-Angular

2 个答案: