PrimeNG 5.2.4 Editor（Quill）在JHipster 4.13.x中样式功能异常求助

我之前在JHipster 4.13.x环境里折腾PrimeNG 5.2.4的Editor组件时，也碰到过一模一样的问题！核心原因是JHipster 4.x用的是自定义Webpack构建配置，而非Angular CLI，所以直接照搬PrimeNG文档改angular-cli.json肯定没用，而且光在vendor.scss里导入CSS也不够，得把Quill的JS和CSS都正确配置到Webpack构建流程中才行。下面是亲测有效的解决步骤：

1. 确认依赖版本并安装 #

PrimeNG 5.2.4只兼容Quill 1.x版本，别装最新的2.x，否则会出兼容性问题。执行以下命令安装正确的依赖：

npm install quill@1.3.6 --save
# 如果还没装PrimeNG 5.2.4，再执行这个
npm install primeng@5.2.4 --save

2. 修改Webpack Vendor配置 #

JHipster 4.x的第三方依赖打包配置在webpack.vendor.js里，我们需要把Quill加入vendor打包列表，并复制它的CSS到静态资源目录：

2.1 添加Quill到Vendor Entry #

打开webpack.vendor.js，找到entry.vendor数组，把quill添加进去：

entry: {
  vendor: [
    // 保留原来的所有依赖...
    'quill'
  ]
}

2.2 复制Quill的CSS文件 #

在同一个文件里找到CopyWebpackPlugin的配置项，添加Quill的两个CSS文件到复制列表：

new CopyWebpackPlugin([
  // 保留原来的复制项...
  { from: 'node_modules/quill/dist/quill.core.css', to: 'css/' },
  { from: 'node_modules/quill/dist/quill.snow.css', to: 'css/' }
])

3. 引入Quill样式到应用 #

有两种方式可以引入样式，选一种就行：

方式一：在index.html中直接引入 #

在src/main/webapp/index.html的head标签里添加：

<link rel="stylesheet" href="css/quill.core.css">
<link rel="stylesheet" href="css/quill.snow.css">

方式二：在vendor.scss中导入 #

打开src/main/webapp/content/css/vendor.scss，添加两行导入：

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';

4. 在Angular模块中导入EditorModule #

在你要使用Editor组件的Angular模块（比如SharedModule或者业务模块）里，导入PrimeNG的EditorModule：

import { EditorModule } from 'primeng/editor';

@NgModule({
  imports: [
    // 其他已导入的模块...
    EditorModule
  ]
})
export class YourTargetModule { }

5. 重启开发服务器 #

因为修改了Webpack配置，必须重启JHipster的开发服务器才能生效。执行：

# 如果是Maven项目
./mvnw
# 或者用npm启动
npm start

做完这些步骤后，PrimeNG的Editor组件应该就能正常渲染样式和功能了！

内容的提问来源于stack exchange，提问作者Jose