首页 文章

PrimeNg编辑器没有出现 - Angular

提问于
浏览 次
1

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

所以这就是我所做的：

Import module in app.module.ts

import { EditorModule } from 'primeng/editor';

Installed packages

npm install quill --save

npm install @types/quill --save

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

Inserted in HTML in 2 different ways

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

Reference them in TS file

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

text: string;

然而，即使在那里显示了p-editor标签，它也没有向最终用户显示任何内容：

End-User Screen

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

我搜索了很多来源，但我没有找到任何答案来解决这个问题，有人可以帮助我吗？谢谢！

资料来源：

javascript html css angular primeng

1 回答

  • 0

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

    • 使用最新版本6创建了新的角度项目

    • npm install primeng --save latest> 6.0.0

    • npm install quill --save

    • 编辑angular.json . 仔细更新如果您的angular.json和node_module位于树的同一级别 . 编辑如下我编辑如下：

    “styles”：[“src / styles.scss”，“node_modules / quill / dist / quill.core.css”，“node_modules / quill / dist / quill.snow.css”]，“scripts”：[“node_modules / quill / dist / quill.js“]

    • 将其导入模块： import {EditorModule} from 'primeng/editor';

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

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

    • 并在组件文件中为text1赋予一些值：string text2：string;

    Github回购参考Git

    回复于

相关问题