vue-quill-editor富文本编辑器（基于Vue脚手架）

Dear 丶 2022-03-21 04:24 300阅读 0赞

（1）安装vue-quill-editor

cnpm install vue-quill-editor --save
    或
    npm install vue-quill-editor --save

（2）plugins下创建nuxt-quill-plugin.js

import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor/dist/ssr'
    Vue.use(VueQuillEditor)

（3）修改nuxt.config.js ,配置插件和样式

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'
      ],

（4）pages/spit/submit.vue

<template>
      <div class="wrapper release-tc">
        <div class="release-box">
          <h3>发布博客</h3>
          <div class="editor">
            <div class="quill-editor" :content="content" @change="onEditorChange($event)" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" v-quill:myQuillEditor="editorOption">
            </div>
          </div>
          <div class="btn">
            <button class="sui-btn btn-danger btn-release" @click="save">发布</button>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
      </div>
    </template>
    
    <script> import '~/assets/css/page-sj-spit-submit.css'//html本身样式 export default { data() { return { content: '',//富文本中数据 editorOption: { // 富文本中的一些属性 modules: { toolbar: [ [{ 'size': ['small', false, 'large']}], ['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet'}], ['link', 'image'], ['blockquote', 'code-block'] ] } } } }, mounted() { console.log('app init, my quill insrance object is:', this.myQuillEditor) /*setTimeout(() => { this.content = 'i am changed' }, 3000)*/ }, methods: { onEditorChange({ editor, html, text }) { //内容改变事件 console.log('editor change!', editor, html, text) this.content = html }, onEditorBlur(editor) { //失去焦点事件 console.log('editor blur!', editor) }, onEditorFocus(editor) { //获得焦点事件 console.log('editor focus!', editor) }, onEditorReady(editor) { //准备编辑器 console.log('editor ready!', editor) }, save(){ //提交 //.... } } } </script>
    <style> .quill-editor { min-height: 200px; max-height: 400px; overflow-y: auto; } </style>