首先在 nuxt.config.js 中配置：
1. module.exports = {
2. // some nuxt config...
3. plugins: [
4. { src: '~plugins/nuxt-quill-plugin.js', ssr: false }
5. ],
6. // some nuxt config...
7. css: [
8. 'quill/dist/quill.snow.css',
9. 'quill/dist/quill.bubble.css',
10. 'quill/dist/quill.core.css'
11. ],
12. // some nuxt config...
13. }
然后在 plugins 文件夹中新建 nuxt-quill-plugin.js 文件，写入一下内容：
1. import Vue from 'vue'
2. import VueQuillEditor from 'vue-quill-editor/dist/ssr'
3.
4. Vue.use(VueQuillEditor)
然后在页面中调用：
1. <template>
2. <div>
3. <!-- 用 v-if 来确保在设定了 editorOption 后才渲染 v-quill -->
4. <div
5. v-if="editorOption"
6. class="quill-editor"
7. v-model="content"
8. @change="onEditorChange($event)"
9. @blur="onEditorBlur($event)"
10. @focus="onEditorFocus($event)"
11. @ready="onEditorReady($event)"
12. v-quill:myQuillEditor="editorOption">
13. </div>
14. </div>
15. </template>
16. <script>
17. import Vue from "vue";
18. export default {
19. beforeMount() {
20. const VueQuillEditor = require("vue-quill-editor/dist/ssr");
21. const Quill = require("quill");
22. const { container, ImageExtend, QuillWatch } = require("quill-image-extend-module");
23.
24. Quill.register("modules/ImageExtend", ImageExtend);
25. Vue.use(VueQuillEditor);
26. this.editorOption = {
27. // some quill options
28. modules: {
29. ImageExtend: {
30. // 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入
31. name: "img", // 图片参数名
32. size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
33. action: "", // 服务器地址, 如果action为空，则采用base64插入图片
34. // response 为一个函数用来获取服务器返回的具体图片地址
35. // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
36. // 则 return res.data.url
37. response: res => {
38. return res.info;
39. },
40. headers: xhr => {
41. // xhr.setRequestHeader('myHeader','myValue')
42. }, // 可选参数 设置请求头部
43. sizeError: () => {}, // 图片超过大小的回调
44. start: () => {}, // 可选参数 自定义开始上传触发事件
45. end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
46. error: () => {}, // 可选参数 上传失败触发的事件
47. success: () => {}, // 可选参数 上传成功触发的事件
48. change: (xhr, formData) => {
49. // xhr.setRequestHeader('myHeader','myValue')
50. // formData.append('token', 'myToken')
51. } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
52. },
53. toolbar: {
54. // 如果不上传图片到服务器，此处不必配置
55. container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
56.
57. handlers: {
58. image: function() {
59. // 劫持原来的图片点击按钮事件
60. QuillWatch.emit(this.quill.id);
61. }
62. }
63. }
64. }
65. }
66. },
67. data() {
68. return {
69. content: "",
70. editorOption: null
71. };
72. },
73. methods: {
74. onEditorBlur(editor) {
75. console.log("editor blur!", editor);
76. },
77. onEditorFocus(editor) {
78. console.log("editor focus!", editor);
79. },
80. onEditorReady(editor) {
81. console.log("editor ready!", editor);
82. },
83. onEditorChange({ editor, html, text }) {
84. console.log("editor change!", editor, html, text);
85. this.content = html;
86. }
87. }
88. };
89. </script>
感谢 @amoshydra 提供帮助