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

Question

在最初实现此功能时，我正在使用Laravel 5.8，但据我所知，这仍然很重要，Larvel 7.x现在已经发布。我正在尝试使用Mix将新的JavaScript库导入我的Laravel 5.8应用程序中。具体来说，就是quill.js库。

Answer 1

以下是我安装鹅毛笔并使之在应用程序中可全局访问的步骤。

1

通过npm安装主轴

npm install quill --save-dev

---

2

创建一个新文件/resources/js/quill.js

---

3

在quill.js文件中，我包含了羽毛笔文档建议的代码：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