vue后台管理系统富文本组件（三）quill

简介

quill也是相当不错的富文本。

优点：美观，现代，功能强大。

缺点：兼容性不好，国际化语言支持缺失。

主要依赖说明 （先安装，步骤略）

 {
    "axios": "^0.18.0",
    "element-ui": "2.11.1",  
    "vue": "^2.6.10",
    "vue-quill-editor": "^3.0.6"
 }

正文

1.组件

文件目录

src/components/QuillEditor/index.vue

<template>
  <div class="custom-quill-editor-container">
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOptions"></quill-editor>
  </div>
</template>
<script>
import configMixins from "./config";  // 见下文
export default {
  props: {
    initValue: {
      type: String,
      default: ""
    }
  },
  mixins: [configMixins],
  data() {
    return { content: "" };
  },
  watch: {
    initValue(val) {
      this.content = val;
    },
    content() {
      this.$emit("subContent", this.content);
    }
  },
  created() {
    this.content = this.initValue;
  }
};
</script>
<style  lang='scss'>
.custom-quill-editor-container {
  .quill-editor {
    height: 300px;
  }
}
</style>

src/components/QuillEditor/config/index.js

//  styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// components
import { quillEditor as QuillEditor } from 'vue-quill-editor';
// config
import toolOptions from './toolOptions';
import handlers from './handlers';

// 全部配置
const editorOptions = {
  placeholder: '请输入内容',
  theme: 'snow', // 主题
  modules: {
    toolbar: {
      handlers, // 事件重写
      container: toolOptions // 工具栏选项
    }
  }
};

export default {
  components: {
    QuillEditor
  },
  created() {},
  data() {
    return { editorOptions };
  }
};

src/components/QuillEditor/config/handlers.js

// 图片上传参数配置
const uploadConfig = {
  action: '',      // 必填参数 图片上传地址
  methods: 'POST', // 必填参数 图片上传方式
  token: '',       // 可选参数 如果需要token验证
  name: 'img',     // 必填参数 文件的参数名
  size: 1024 * 3,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
  accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
};
// handler重写事件, 这里只重写图片上传事件
const handlers = {
  image: function image() {
    let fileInput = this.container.querySelector('input.ql-image[type=file]');
    if (fileInput === null) {
      fileInput = document.createElement('input');
      fileInput.setAttribute('type', 'file');
      // 设置图片参数名
      if (uploadConfig.name) {
        fileInput.setAttribute('name', uploadConfig.name);
      }
      // 可设置上传图片的格式
      fileInput.setAttribute('accept', uploadConfig.accept);
      fileInput.classList.add('ql-image');
      // 监听选择文件
      fileInput.addEventListener('change', () => {
        // 如果图片限制大小
        if (
          uploadConfig.size &&
          fileInput.files[0].size >= uploadConfig.size * 1024
        ) {
          fileInput.value = '';
          return;
        }
        
        // 上传

        // console.log(fileInput.files);
        // 上传成功后服务器返回的url
        // const url = '';

        // 把成功后的url插入组件
        // const length = this.quill.getSelection(true).index;
        // this.quill.insertEmbed(length, 'image', url);
        // this.quill.setSelection(length + 1);
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
};

export default handlers;

src/components/QuillEditor/config/toolOptions.js

// toolbar工具栏的工具选项（默认展示全部）
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [
    {
      header: 1
    },
    {
      header: 2
    }
  ],
  [
    {
      list: 'ordered'
    },
    {
      list: 'bullet'
    }
  ],

  [
    {
      size: ['small', false, 'large', 'huge']
    }
  ],
  [
    {
      header: [1, 2, 3, 4, 5, 6, false]
    }
  ],
  [
    {
      color: []
    },
    {
      background: []
    }
  ],
  [
    {
      font: []
    }
  ],
  [
    {
      align: []
    }
  ],
  ['clean'],
  ['link', 'image']
];

export default toolOptions;

2.使用

<template>
  <div id="app">
    <quill-editor :init-value="initValue" @subContent="handleGetContent" />
  </div>
</template>

<script>
import QuillEditor from "@/components/QuillEditor";

export default {
  name: "App",
  components: {
    QuillEditor
  },
  data() {
    return {
      initValue: "你好"
    };
  },
  methods: {
    handleGetContent(content) {
      console.log(content);
    }
  }
};
</script>

3.使用效果

参考链接

1.https://quilljs.com/

2.https://surmon-china.github.io/vue-quill-editor/