Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。

1登峰造极

已于 2023-04-07 10:15:18 修改

阅读量2.8k

点赞数 1

分类专栏： Vue-Quill-Editor 文章标签： vue.js

于 2022-10-17 15:31:05 首次发布

本文链接：https://blog.csdn.net/qq_33323469/article/details/127363978

版权

Vue-Quill-Editor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在日常开发中我们经常会使用到富文本编辑器，怎么选择一个好的富文本编辑器呢

安装依赖

npm install vue-quill-editor --save

npm install quill --save

个人不太喜欢wangedit，说不上来那里不好
最后还是选用了quillEditor

在这里插入图片描述

小坑
就是我们在里面按了键盘上的空格键的时候，下面显示的文字不会缩进，这时我们只需要添加一个class完事

<span v-html="content" :class="['quill', 'ql-editor']"></span>

但是实际开发中这需要帮这段富文本提交给后端，比如我们编辑的时候，需要先回显，在编辑，你会发现回显在富文本编辑器中的内容空格不在了，这个时候只需要给上面的 class="ql-editor"


  <quill-editor 
     class="ql-editor"
  </quill-editor>

使用方法跟简单
直接在组件中使用即可
代码如下


<template>
  <div class="edit_container">
      <p>quillEditor编辑器使用</p>
      <quill-editor 
         class="ql-editor"
          v-model="content" 
          ref="myQuillEditor" 
          :options="editorOption" 
          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
          @change="onEditorChange($event)">
      </quill-editor>

      <span v-html="content" :class="['quill', 'ql-editor']"></span>
   
      <button @click="handRemove">
         清空
      </button>
      <button @click="showtext">
        回显
      </button>
  </div>
</template>
<script>
const toolbarOptions = [
  ['insertMetric'],
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                     //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进
  [{ 'direction': 'rtl' }],                         // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题
  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
  [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体
  [{ 'align': [] }],    // 居中
 // ['clean'],            // 清除样式,
  //['link', 'image']   // 上传图片、上传视频
]

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';



export default {
  components: {
      quillEditor
  },
  data() {
      return {
       content: ``,
        editorOption: {
         placeholder: '请在这里输入',
        theme: 'snow', //主题 snow/bubble
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              insertMetric: this.showHandle
            }
          }
        }
      }
    
    }
  },
  methods: {
      onEditorReady(editor) { // 准备编辑器
         console.log(editor)
      },
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      onEditorChange(){}, // 内容改变事件
      
      handRemove(){
        this.content = ""
      },
      showtext(){
        this.content = `<p>啥地方第三方水电费水电费水电费水电费水电费速度佛挡杀佛</p><p> 水电费水电费水电费</p><p>第三方水电费第三方</p><p> 胜多负少的水电费水电费水电费</p>`
      }
  },
  computed: {
      editor() {
          return this.$refs.myQuillEditor.quill;
      },
  }
}
</script>
<style >
.edit_container{
  width: 90%;
  margin: 50px auto;
}
.ql-editor{
    min-height: 300px;
}
</style>