vue——vue中使用富文本编辑器

展示效果

一、首先安装vue-quill-editor

npm install vue-quill-editor --save
//compress.js是为了图片压缩
npm install compress.js --save 

二、导入并在你的Vue组件中注册：

1.在全局组件components文件夹中新建Editor，在utils文件夹中新建compressImage.js

2.Editor组件代码：

代码如下（示例）：

<template>
  <div>
    <!-- 视频 -->
    <el-dialog
      width="50%"
      id="video_upload"
      style="margin-top: 1px"
      title="视频上传"
      :visible.sync="videoUploadTag"
      append-to-body
    >
      <div>
        <el-input
          v-model="videoLink"
          placeholder="请输入视频链接"
          clearable
        ></el-input>
        <el-button
          type="primary"
          size="small"
          style="margin: 20px 0px 0px 0px"
          @click="addVideoLink()"
          >添加
        </el-button>
      </div>
    </el-dialog>
    <!-- 图片上传组件辅助 -->
    <el-upload
      class="avatar-uploader quill-img"
      action="#"
      name="file"
      :show-file-list="false"
      :before-upload="quillImgBefore"
      :http-request="upload"
      accept=".jpg,.jpeg,.png,.gif"
    ></el-upload>

    <!-- 富文本组件 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="quillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>

<script>
// 工具栏配置
const toolbarOptions = (video) => {
   
   
  return [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    // ["blockquote", "code-block"], // 引用  代码块
    [{
   
    list: "ordered" }, {
   
    list: "bullet" }], // 有序、无序列表
    [{
   
    indent: "-1" }, {
   
    indent: "+1" }], // 缩进
    [{
   
    size: ["small", false, "large", "huge"] }], // 字体大小
    [{
   
    header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{
   
    color: [] }, {
   
    background: [] }], // 字体颜色、字体背景颜色
    [{
   
    align: [] }], // 对齐方式
    ["clean"], // 清除文本格式
    ["link", "image", video === undefined ? undefined : "video"], // 链接、图片、视频, "video"
  ];
};

import {
   
    quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import {
   
    uploadImage } from "@/api/index.js";//这个是后端图片的上传接口
import CImage from "@/utils/compressImage.js";
export default {
   
   
  props: {
   
   
    /* 编辑器的内容 */
    value: {
   
   
      type: String,
    },
    video: