PrimeNg错误: Quill未定义

Question

我试图在primeng：https://www.primefaces.org/primeng/#/editor中使用编辑器控件

但我发现了错误：

ERROR ReferenceError: Quill未在Editor.webpackJsonp.../../../../primeng/components/editor/editor.js.Editor.ngAfterViewInit中定义

我的项目使用：

• 角Cli: 1.4.1
• 角度: 4.3.6
• 国家预防机制: 5.4.1
• 节点: 6.10.0
• PrimeNG: 4.2.0

我发现了这个问题：https://github.com/primefaces/primeng/issues/807

我按照指示行事：

导入编辑器模块

import {EditorModule} from 'primeng/primeng';

安装软件包：

npm install quill --save

npm install @types/quill --save

更新角-cli.json

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

但它仍然有同样的问题。我只是添加默认标记：

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

我得到了错误，它看起来是这样的：

​

​

在那个线程上，我唯一没有尝试的是安装webpack插件，因为我使用的是角cli，我不认为这是一个选项。

我能做些什么来解决这个问题？

Answer 1

试试看:它对我来说非常有效

版本：

Node : 7.9.0
angular/cli: 1.3.0
angular: 4.3.6
npm: 4.2.0
primeng": "^4.2.0-rc.1"

安装节点模块

npm install quill --save

.angular-cli.json

"styles": [
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/quill/dist/quill.core.css",
  "../node_modules/quill/dist/quill.snow.css"
],
"scripts": [
  "../node_modules/quill/dist/quill.js"
]

app.module.ts

import { EditorModule } from 'primeng/primeng';

@NgModule({
    imports: [
        EditorModule
    ]
})

app.component.html

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

app.component.ts

export class AppComponent {
    text: string;
}

​

​

Answer 2

我认为问题在于PrimeNG文档

我得到了“不存在”错误，在查看日志后，我发现路径是错误的.(无论如何，对于Angular9来说)。

PS:这假设你已经安装了npm BTW的羽毛笔

在angular.json脚本和样式部分中，删除"../“(如primeng中所定义的)，这样它就可以读取.

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

它现在编译，并为我修复它。

不确定这是否是Windows的东西，但是"../“告诉编译器看错地方了。

Answer 3

需要在应用程序中添加羽毛笔的资源。使用CLI的示例设置如下；

npm安装笔-保存

在angular.json中向脚本添加Quill

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

在angular.json中将Quill css添加到样式中

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

对于新的和现有的项目，我已经多次检查了这个解决方案，它的工作方式类似于魅力:)