黄良钵博客

程序开发 Nuxt中使用富文本编辑器vue-quill-editor + 图片上次quill-image-extend-module

首先在 nuxt.config.js 中配置： module.exports = {     // some nuxt config...     plugins: [       { src: '~plugins/nuxt-quill-plugin.js', ssr: false }     ],     // some nuxt config...     css: [       'quill/dist/quill.snow.css',       'quill/dist/quill.bubble.css',       'quill/dist/quill.core.css'     ],     // some nuxt config...   } 然后在 plugins 文件夹中新建 nuxt-quill-plugin.js 文件，写入一下内容： import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 然后在页面中调用： <template> <div>     <!-- 用 v-if 来确保在设定了 editorOption 后才渲染 v-quill -->   <div     v-if="editorOption"     class="quill-editor"     v-model="content"     @change="onEditorChange($event)"     @blur="onEditorBlur($event)"     @focus="onEditorFocus($event)"     @ready="onEditorReady($event)"     v-quill:myQuillEditor="editorOption">   </div> </div> </template> <script> import Vue from "vue"; export default {   beforeMount() {     const VueQuillEditor = require("vue-quill-editor/dist/ssr");     const Quill = require("quill");     const { container, ImageExtend, QuillWatch } = require("quill-image-extend-module");     Quill.register("modules/ImageExtend", ImageExtend);     Vue.use(VueQuillEditor);     this.editorOption = {         // some quill options         modules: {           ImageExtend: {             // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入             name: "img", // 图片参数名             size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb             action: "", // 服务器地址, 如果action为空，则采用base64插入图片             // response 为一个函数用来获取服务器返回的具体图片地址             // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}             // 则 return res.data.url             response: res => {               return res.info;             },             headers: xhr => {               // xhr.setRequestHeader('myHeader','myValue')             }, // 可选参数 设置请求头部             sizeError: () => {}, // 图片超过大小的回调             start: () => {}, // 可选参数 自定义开始上传触发事件             end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败             error: () => {}, // 可选参数 上传失败触发的事件             success: () => {}, // 可选参数  上传成功触发的事件             change: (xhr, formData) => {               // xhr.setRequestHeader('myHeader','myValue')               // formData.append('token', 'myToken')             } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData           },           toolbar: {             // 如果不上传图片到服务器，此处不必配置             container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置             handlers: {               image: function() {                 // 劫持原来的图片点击按钮事件                 QuillWatch.emit(this.quill.id);               }             }           }         }       }   },   data() {     return {       content: "",       editorOption: null     };   },   methods: {     onEditorBlur(editor) {       console.log("editor blur!", editor);     },     onEditorFocus(editor) {       console.log("editor focus!", editor);     },     onEditorReady(editor) {       console.log("editor ready!", editor);     },     onEditorChange({ editor, html, text }) {       console.log("editor change!", editor, html, text);       this.content = html;     }   } }; </script> 感谢 @amoshydra 提供帮助