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: '<p>欢迎使用quill富文本</p>'
      }
    },
    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中的使用方式