vue富文本

下载依赖

npm install vue-quill-editor -S
// main.js中使用
import VueQuillEditor from 'vue-quill-editor'
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
Vue.use(VueQuillEditor)

// 新建js文件,真对图片
// import store from '@/store/index'
import Vue from 'vue'
// Vue.use(store)
// 图片上传参数配置
const uploadConfig = {
  action: '上传图片的地址',  // 必填参数 图片上传地址
  methods: 'POST',  // 必填参数 图片上传方式
  // token: localStorage.getItem('token'),  // 可选参数 如果需要token验证，假设你的token有存放在vuex
  name: 'file',  // 必填参数 文件的参数名
  size: 10240,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
  accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'  // 可选 可上传的图片格式
}

// toolbar工具栏的工具选项（默认展示全部）
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];

// handler重写事件, 任何工具按钮的功能都可以重写，这里只重写图片上传事件
const handlers = {
  image: function image () {
    var self = this;

    var 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', function () {
        // 如果图片限制大小
        if (uploadConfig.size && fileInput.files[0].size >= uploadConfig.size * 1024) {
          fileInput.value = ''
          return
        }
        // 创建formData
        var formData = new FormData()
        formData.append(uploadConfig.name, fileInput.files[0])
        // 如果需要token且存在token
        // if (uploadConfig.token) {
        //   formData.append('token', uploadConfig.token)
        // }
        // 图片上传
        var xhr = new XMLHttpRequest()
        xhr.open(uploadConfig.methods, uploadConfig.action, true)
        // 上传数据成功，会触发
        // xhr.setRequestHeader('token', store.state.user.token)
        xhr.onload = function (e) {
          console.log(e);
          if (xhr.status === 200) {
            var res = JSON.parse(xhr.responseText)
            console.log(res)
            let length = self.quill.getSelection(true).index;
            self.quill.insertEmbed(length, 'image', res.data.url)
            self.quill.setSelection(length + 1)
          }
          fileInput.value = ''
        }
        // 开始上传数据
        xhr.upload.onloadstart = function (e) {
          fileInput.value = ''
          // console.log('开始上传')
        }
        // 当发生网络异常的时候会触发，如果上传数据的过程还未结束
        xhr.upload.onerror = function (e) {
        }
        // 上传数据完成（成功或者失败）时会触发
        xhr.upload.onloadend = function (e) {
          // console.log('上传结束')
        }
        xhr.send(formData)
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
}
// 全部配置
export const editorOptions = {
  placeholder: '',
  theme: 'snow',  // 主题
  modules: {
    toolbar: {
      container: toolbarOptions,  // 工具栏选项
      handlers: handlers  // 事件重写
    }
  }
}

//使用
<template>
    <div>
        <div style="width:1800px">
            <quill-editor
                v-model="content"
                ref="myQuillEditor"
                :options="editorOptions"
                @focus="onEditorFocus($event)"
                @blur="onEditorBlur($event)"
                @change="onEditorChange($event)"
                class="editor"
            ></quill-editor>
        </div>
    </div>
</template>

<script>
import { editorOptions } from "./vue-quill-editor-config";
// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
    [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
    [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ font: [] }], // 字体种类-----[{ font: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    ["clean"], // 清除文本格式-----['clean']
    ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
    name: "",
    data() {
        return {
            editorOptions: editorOptions,
            //   uniqueId: "uniqueId",
            content: "", // 富文本编辑器默认内容
            editorOption: {
                //  富文本编辑器配置
                modules: {
                    toolbar: toolbarOptions
                },
                theme: "snow",
                placeholder: "请输入正文"
            }
        };
    },
    computed: {
        //当前富文本实例
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    },
    methods: {
        // 准备富文本编辑器
        onEditorReady() { },
        // 富文本编辑器 失去焦点事件
        onEditorBlur() { },
        // 富文本编辑器 获得焦点事件
        onEditorFocus() { },
        // 富文本编辑器 内容改变事件
        onEditorChange({ html, text, quill }) {
            console.log(html);
        },

    },
};
</script>