vue 整合使用 Vue-Quill-Editor富文本编辑器

# npm 安装

1、下载Vue-Quill-Editor

npm install vue-quill-editor --save

2、下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

# 新建一个 quill.vue

<template>
  <div><quill-editor v-model="content"></quill-editor></div>
</template>

<script>
  import  {
     quillEditor} from 'vue-quill-editor'  // 引入编辑器
  // require styles 引入样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

    export default {
     
      name: "quill",
      components: {
     
        quillEditor
      },
      data(){
     
        return {
     
          content:null
        }
      }
    }
</script>

<style scoped>
</style>

• 这就是一个富文本的组件了，在需要用到的地方引入即可
  
  
  
  

# 组件内使用

<template>
  <div>
    <quill ref="myQuillEditor"></quill>
  </div>
</template>

<script>
  // 引入 quill 组件
  import quill from '@/components/indexs/quill'

  export default {
     
    name: "test1",
    components: {
     
      quill
    },
    data() {
     
      return {
     
      }
    },
    mounted() {
     
      console.log(" 获取富文本框内的值，使用this.$refs.myQuillEditor.content 获取");
      console.log(this.$refs.myQuillEditor.content);
    },
    methods: {
     
    }
  }
</script>

<style scoped>
</style>

• 父组件获取子组件属性和方法：https://blog.csdn.net/zhongshijun521/article/details/80610971
  
  
  
  

# 显示富文本的文本

<template>
  <div class="ql-snow">
    <div class="ql-editor" v-html="contents">{
     {
     contents}}</div>
  </div>
</template>

<script>
  export default {
     
    name: "test2",
    data() {
     
      return {
     
        contents: '
欢迎使用quill富文本
'
      }
    },
    mounted() {
     
    },
    methods: {
     
    }
  }
</script>

<style scoped>
</style>

# 自定义 Vue-Quill-Editor 工具栏

<template>
  <div><quill-editor v-model="content" style="height: 100px;" :options="editorOption"></quill-editor></div>
</template>

<script>
  import  {
     quillEditor} from 'vue-quill-editor'  // 引入编辑器
  // 富文本编辑器外部引用样式  三种样式三选一引入即可
  import 'quill/dist/quill.snow.css'
  // import 'quill/dist/quill.core.css'
  // import 'quill/dist/quill.bubble.css'

  export default {
     
    name: "quill",
    components: {
     
      quillEditor
    },
    data(){
     
      return {
     
        content: '欢迎使用',
        editorOption: {
     
          modules: {
     
            toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块

              [{
      'header': 1 }, {
      'header': 2 }],        // 标题，键值对的形式；1、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': [] }],     //字体
              [{
      'align': [] }],    //对齐方式

              ['clean'],    //清除字体样式
              ['image','video']    //上传图片、上传视频
            ]
          },
        }
      }
    },
  }
</script>

<style scoped>
</style>

参考博客：

1. Vue-Quill-Editor在vue中的使用方式