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

nuxt富文本编辑器

首先在 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. 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.     Quill.register("modules/ImageExtend", ImageExtend);
  24.     Vue.use(VueQuillEditor);
  25.     this.editorOption = {
  26.         // some quill options
  27.         modules: {
  28.           ImageExtend: {
  29.             // 如果不作设置,即{}  则依然开启复制粘贴功能且以base64插入
  30.             name: "img"// 图片参数名
  31.             size: 3, // 可选参数 图片大小,单位为M,1M = 1024kb
  32.             action: ""// 服务器地址, 如果action为空,则采用base64插入图片
  33.             // response 为一个函数用来获取服务器返回的具体图片地址
  34.             // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
  35.             // 则 return res.data.url
  36.             response: res => {
  37.               return res.info;
  38.             },
  39.             headers: xhr => {
  40.               // xhr.setRequestHeader('myHeader','myValue')
  41.             }, // 可选参数 设置请求头部
  42.             sizeError: () => {}, // 图片超过大小的回调
  43.             start: () => {}, // 可选参数 自定义开始上传触发事件
  44.             end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败
  45.             error: () => {}, // 可选参数 上传失败触发的事件
  46.             success: () => {}, // 可选参数  上传成功触发的事件
  47.             change: (xhr, formData) => {
  48.               // xhr.setRequestHeader('myHeader','myValue')
  49.               // formData.append('token', 'myToken')
  50.             } // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
  51.           },
  52.           toolbar: {
  53.             // 如果不上传图片到服务器,此处不必配置
  54.             container: container, // container为工具栏,此次引入了全部工具栏,也可自行配置
  55.             handlers: {
  56.               image: function() {
  57.                 // 劫持原来的图片点击按钮事件
  58.                 QuillWatch.emit(this.quill.id);
  59.               }
  60.             }
  61.           }
  62.         }
  63.       }
  64.   },
  65.   data() {
  66.     return {
  67.       content: "",
  68.       editorOption: null
  69.     };
  70.   },
  71.   methods: {
  72.     onEditorBlur(editor) {
  73.       console.log("editor blur!", editor);
  74.     },
  75.     onEditorFocus(editor) {
  76.       console.log("editor focus!", editor);
  77.     },
  78.     onEditorReady(editor) {
  79.       console.log("editor ready!", editor);
  80.     },
  81.     onEditorChange({ editor, html, text }) {
  82.       console.log("editor change!", editor, html, text);
  83.       this.content = html;
  84.     }
  85.   }
  86. };
  87. </script>

感谢 @amoshydra 提供帮助

黄良钵

博客站长,前端开发工程师

Leave a Reply

Your email address will not be published. Required fields are marked *

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Nuxt中使用富文本编辑器vue-quill-editor + 图片上次quill-image-extend-module
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close