PrimeNg编辑器没有出现 - Angular [英] PrimeNg Editor is not showing up - Angular

问题描述

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

I have followed many tutorials, but as of yet, I did not manage to make PrimeNG's Editor module to show up! (Other modules like Toast or buttons are working fine, it's only Editor that is not working).

所以这就是我做的：

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标签，它也没有向最终用户显示任何内容那里：

Yet it does not show anything to the end-user, even though the p-editor tag is shown there:

最终用户屏幕

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

I think it could be a CSS problem, but I have checked on the CSS files, but I could barely retrieve a tag because it does not show anything in the page. (I have searched the one from PrimeNG original website, it does a tag but it's not in the CSS either).

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

I have searched on many sources, yet I haven't found any answer to solve that problem, can someone help me out? Thanks!

来源：

• https://github.com/primefaces/primeng/issues/807


• < a href =https://stackoverflow.com/questions/46203041/primeng-error-quill-is-not-defined> PrimeNg错误：未定义Quill


• http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/

• https://github.com/primefaces/primeng/issues/807
• PrimeNg Error: Quill is not defined
• http://embed.plnkr.co/8vzhESEWbUseFcSqttH5/

推荐答案

刚才我为PrimeNg编辑器创建了一个项目

Just now I created a project for PrimeNg Editor

1. 使用最新版本6创建新的角度项目



2. npm install primeng --save latest> 6.0.0

1. Created new angular project with latest Version 6

2. npm install primeng --save latest > 6.0.0

npm install quill --save

npm install quill --save

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

Edit angular.json. Update it carefully If Your angular.json and node_module are at same level of tree. The Edit like below I edited like this :

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
]

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

将它导入模块：从'primeng / editor导入{EditorModule} ';

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

imports: [ HttpModule, FormsModule, BrowserModule, ButtonModule, TableModule, EditorModule ],

在任何模板中添加html < ; p-editor [（ngModel）] =text1[style] ={'height'：'320px'}>< / p-editor>
< p>价值：{{text1 ||'empty'}}< / p>

Add html in any of the template <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>

在组件文件中给text1一些值：string
text2：string;

And in component file give some value to text1: string text2: string;

Github repo供参考 Git

Github repo for reference Git

这篇关于PrimeNg编辑器没有出现 - Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！