使用 Mix/Webpack 将 quill.js 导入 Laravel

Import quill.js into Laravel using Mix/Webpack

在我最初实现这个的时候,我使用的是 Laravel 5.8,但据我所知,这仍然是相关的,Larvel 7.x 现在已经出来了。我正在尝试使用 Mix 将新的 javascript 库导入到我的 Laravel 5.8 应用程序中。具体来说,quill.js 库。

以下是我安装 quill 并使其在应用程序中可全局访问的步骤。

1

通过 npm 安装 quill

npm install quill --save-dev

2

新建文件/resources/js/quill.js


3

在 quill.js 文件中,我包含了 quill 文档建议的代码:https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});


export default Quill;

4

在我的 app.js 文件中,我包含了 quill.js 文件并将其分配给全局范围

require('./quill.js');

window.Quill = require('Quill');

5

在/resources/sass/app.scss

中导入羽毛笔css
@import '~quill/dist/quill.core.css';

还有你的主题

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

6

运行 npm run dev

如果您不一定要导入特定的 Quill 组件,而只想模拟来自 CDN 的行为,您可以:

  1. 安装羽毛笔
npm i quill
  1. 在你的resources/js/app.js
import Quill from 'Quill';
  1. 在您的元素上附加羽毛笔
new Quill('.quill-editor', {});