资料

方法一

• 基于Vue的Vue-Quill-Editor富文本编辑用法
• vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options

方法二 ==(建议使用)==

• vue中安装使用Quill富文本编辑器
• 在vue中Quill富文本编辑器的使用（主题、自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小）
• quill-editor富文本编辑器组件的运用与修改配置使图片上传到服务器
• vue-quill-editor的增强模块，提供图片上传，复制插入，拖拽插入，支持与其他模块一起使用

其他

• 丰富的文本编辑平tiny

1、下载Vue-Quill-Editor

npm install vue-quill-editor --save

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

npm install quill --save

3、代码(1)

<script>
/**
 * 富文本vue-quill-editor 组件
 * name wangkai
 *-------------------设置文档----------------
 *---------- 1、toolbar工具栏-模块名----------
 *  background  --------------  背景颜色
 *  bold  --------------------  加粗
 *  color --------------------  颜色
 *  font  --------------------  字体
 *  code  --------------------  内联代码
 *  italic  ------------------  斜体
 *  link  --------------------  链接
 *  size  --------------------  大小
 *  strike  ------------------  删除线
 *  script  ------------------  上标/下标
 *  underline  ---------------  下划线
 *  blockquote  --------------  引用
 *  header  ------------------  标题
 *  indent  ------------------  缩颈
 *  list  --------------------  列表
 *  align  -------------------  文本对齐
 *  direction  ---------------  文本方向
 *  code-block  --------------  代码块
 *  formula  -----------------  公式
 *  image  -------------------  图片
 *  video  -------------------  视频
 *  clean  -------------------  清除字体样式
 */
import Quill from 'quill';
// quill图片可拖拽上传
import { ImageDrop } from 'quill-image-drop-module';

Quill.register('modules/imageDrop', ImageDrop);

export default {
  name: 'the_rich_text',
  data() {
    return {
      data: this.content,
      // toolbar工具栏设置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ color: [] }, { background: [] }],
            ['link', 'image'],
            ['blockquote', 'code-block'],
            [{ align: [] }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            // [{ header: 1 }, { header: 2 }],
            // [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ font: [] }],
            // [{ indent: '-1' }, { indent: '+1' }],
          ],
          imageDrop: true,
        },
      },
    };
  },
  props: {
    // 表格数据
    content: {
      type: String,
      default: () => (''),
      required: true,
    },
  },
  methods: {
    // 失去焦点事件
    onEditorBlur() {
      this.$emit('onEditorBlur', this.data);
    },
    // 获得焦点事件
    onEditorFocus() {
      this.$emit('onEditorFocus', this.data);
    },
    // 编辑器文本发生变化
    onEditorChange() {
      this.$emit('onEditorChange', this.data);
    },
  },
};
</script>

<template lang="pug">
  .the-rich-text
    quill-editor(
      v-model="data"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @change="onEditorChange")
</template>

<style lang="stylus" scoped>
.the-rich-text
  width 100%
  margin 20px 0px
  display inline-block
  background #ffffff
</style>

4、代码(2)

• 依赖包

"quill": "^1.3.6",
"quill-image-extend-module": "^1.1.2",
"vue-quill-editor": "^3.0.6",

<script>
/**
 * 富文本 vue-quill-editor 组件
 * Author: wangkai
 */
import { quillEditor, Quill } from 'vue-quill-editor';
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

Quill.register('modules/ImageExtend', ImageExtend);

export default {
  name: 'the_rich_text',
  components: {
    quillEditor,
  },
  data() {
    return {
      content: '',
    };
  },
  model: {
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: () => (''),
      required: true,
    },
    action: {
      type: String,
      default: null,
    },
    name: {
      type: String,
      default: 'file',
    },
    headers: {
      type: Object,
      default: () => ({}),
    },
    size: {
      type: Number,
      default: null,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    options() {
      const { name, action, headers, size } = this;
      return {
        modules: {
          ImageExtend: {
            loading: true,
            name,
            action,
            size,
            headers: (xhr) => {
              Object.entries(headers).forEach((ary) => {
                xhr.setRequestHeader(ary[0], ary[1]);
              });
            },
            response: res => res.url,
            sizeError() {

            },
            start: () => {

            },
            end: () => {
            },
            error: () => {

            },
            success: () => {

            },
            change: (xhr, formData) => {
              Object.entries(this.formData).forEach((ary) => {
                formData.append(ary[0], ary[1]);
              });
            },
          },
          toolbar: {
            container,
            handlers: {
              image() {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      };
    },
  },
  methods: {
    // 失去焦点事件
    onEditorBlur(...args) {
      this.$emit('blur', ...args);
    },
    // 获得焦点事件
    onEditorFocus(...args) {
      this.$emit('focus', ...args);
    },
    // 编辑器文本发生变化
    onEditorChange({ html }) {
      this.$emit('change', html);
    },
  },
};
</script>

<template lang="pug">
  .the-rich-text
    quill-editor(
      ref="myQuillEditor"
      :value="value"
      :options="options"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @change="onEditorChange")
</template>

<style lang="stylus" scoped>
.the-rich-text
  width 100%
  margin 20px 0px
  display inline-block
  background #ffffff
</style>

5、组件使用

//-富文本
  the-rich-text(
    v-model="data"
    action="http://api.pay-star.com/admin/images"
    :headers="{ 'company-token': '4P6snTNhfADVykzxYkLAvs' }")

修改后的组件(支持自定义设置toolbar-工具栏)

6、代码(3)

<script>
/**
 * 富文本 vue-quill-editor 组件
 * Author: wangkai
 */
import { quillEditor, Quill } from 'vue-quill-editor';
import { ImageExtend, QuillWatch } from 'quill-image-extend-module';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

Quill.register('modules/ImageExtend', ImageExtend);

export default {
  name: 'the_rich_text',
  components: {
    quillEditor,
  },
  data() {
    return {
      content: '',
    };
  },
  model: {
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: () => (''),
      required: true,
    },
    action: {
      type: String,
      default: null,
    },
    name: {
      type: String,
      default: 'file',
    },
    headers: {
      type: Object,
      default: () => ({}),
    },
    size: {
      type: Number,
      default: null,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    container: {
      type: Array,
      default: () => ([]),
    },
  },
  computed: {
    options() {
      const { name, action, headers, size, container } = this;
      return {
        modules: {
          ImageExtend: {
            loading: true,
            name,
            action,
            size,
            headers: (xhr) => {
              Object.entries(headers).forEach((ary) => {
                xhr.setRequestHeader(ary[0], ary[1]);
              });
            },
            response: res => res.url,
            sizeError() {

            },
            start: () => {

            },
            end: () => {
            },
            error: () => {

            },
            success: () => {

            },
            change: (xhr, formData) => {
              Object.entries(this.formData).forEach((ary) => {
                formData.append(ary[0], ary[1]);
              });
            },
          },
          toolbar: {
            container,
            handlers: {
              image() {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      };
    },
  },
  methods: {
    // 失去焦点事件
    onEditorBlur(...args) {
      this.$emit('blur', ...args);
    },
    // 获得焦点事件
    onEditorFocus(...args) {
      this.$emit('focus', ...args);
    },
    // 编辑器文本发生变化
    onEditorChange({ html }) {
      this.$emit('change', html);
    },
  },
};
</script>

<template lang="pug">
  .the-rich-text
    quill-editor(
      ref="myQuillEditor"
      :value="value"
      :options="options"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      @change="onEditorChange")
</template>

<style lang="stylus" scoped>
.the-rich-text
  width 100%
  margin 20px 0px
  display inline-block
  background #ffffff
</style>

7、组件使用(修改后)

//-富文本-HTML
  the-rich-text(
    v-model="data"
    :container="toolbar", // 添加自定义功能。
    action="http://api.pay-star.com/admin/images"
    :headers="{ 'company-token': '4P6snTNhfADVykzxYkLAvs' }")

• 设置文档

 * 富文本vue-quill-editor 组件
 * name wangkai
 *-------------------设置文档----------------
 *---------- 1、toolbar工具栏-模块名----------
 *  background  --------------  背景颜色
 *  bold  --------------------  加粗
 *  color --------------------  颜色
 *  font  --------------------  字体
 *  code  --------------------  内联代码
 *  italic  ------------------  斜体
 *  link  --------------------  链接
 *  size  --------------------  大小
 *  strike  ------------------  删除线
 *  script  ------------------  上标/下标
 *  underline  ---------------  下划线
 *  blockquote  --------------  引用
 *  header  ------------------  标题
 *  indent  ------------------  缩颈
 *  list  --------------------  列表
 *  align  -------------------  文本对齐
 *  direction  ---------------  文本方向
 *  code-block  --------------  代码块
 *  formula  -----------------  公式
 *  image  -------------------  图片
 *  video  -------------------  视频
 *  clean  -------------------  清除字体样式

• 数据结构

toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: [] }, { background: [] }],
    ['link', 'image'],
    ['blockquote', 'code-block'],
    [{ align: [] }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }],
    // [{ header: 1 }, { header: 2 }],
    // [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ size: ['small', false, 'large', 'huge'] }],
    [{ font: [] }],
    // [{ indent: '-1' }, { indent: '+1' }],
  ],