vue+ quillEditor(富文本编辑器)

1.下载Vue-Quill-Editor
npm install vue-quill-editor --save
2.安装不局限npm，yarn 和pnpm更好；
下载quill（Vue-Quill-Editor需要依赖）
npm install quill --save；
3.项目中引入
    import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
    import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
    //import 'quill/dist/quill.core.css'
    //import 'quill/dist/quill.bubble.css'
    import * as Quill from 'quill'; // 富文本基于quill

<template>
  <div class="about">
    <div class="editor_container">
      <div style="display: flex;margin-bottom: 20px;">
        <el-form ref="form" style="flex: 1" :model="form">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.orderStatus" placeholder="请选择状态">
              <el-option label="隐藏" :value="0"></el-option>
              <el-option label="发布" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-upload
            name="file"
            style="width: 50%;margin: 0px 20px;"
            :ref="`upload`"
            :action="upload"
            :limit="1"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :headers="headers"
        >
          <div class="upload_file upload_body" @click.stop>
            <el-table
                ref="singleTable"
                :data=" form['filesJson'] ? JSON.parse(form['filesJson']) ? JSON.parse(form['filesJson']) : [] : []"
                style="width: 100%;min-height: 150px;">
              <el-table-column
                  property="name"
                  label="文件名"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  property="sizeName"
                  label="文件大小"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  property="createTime"
                  label="上传日期"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  label="操作"
                  align="center"
              >
                <template slot-scope="scope">
                  <a :href="upload_url + scope.row.path" style="color: #1890ff !important;margin-right: 5px;">下载</a>
                  <span @click="delectFile(scope)" style="color: #1890ff !important">删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="upload_file">
            <el-button plain class="upload_file" v-repeatClick
                       type="primary">
              上传
            </el-button>
          </div>
        </el-upload>
      </div>
      <quill-editor
          v-model="form.content"
          ref="myQuillEditor"
          :options="editorOption"
      >
      </quill-editor>
      <div>
        <el-button style="margin: 30px 0;" type="primary" block @click="onclickForm">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
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 {postAction} from "@/api/manage";

export default {
  name: 'about',
  components: {quillEditor},
  data() {
    return {
      form:{
        content: '',
        title: '',
        orderStatus: 0,
        filesJson: ''
      },
      // 编辑器配置
      editorOption: {
        placeholder: '在这里输入内容',
        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'], // 上传图片、上传视频
          ]
        }
      },
      upload: process.env.VUE_APP_API_BASE_URL + '/File/UploadFile',
      upload_url: process.env.VUE_APP_DOWN_BASE_URL,
      headers: {
        Authorization: 'Bearer ' + this.$ls.get('Access-Token'),
      },
    }
  },
  mounted() {
    this.str = this.escapeStringHTML(content)
  },
  activated() {
    console.log(this.$route.query.record, 'this.$route.params.i')
    if(this.$route.query.record){
      this.record = this.$route.query.record
      this.obtainDetails()
    }else{
      this.form = {
        content: '',
            title: '',
            orderStatus: 0,
            filesJson: ''
      }
    }
  },
  methods: {
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/</g, '<');
      str = str.replace(/>/g, '>');
      return str
    },
    onclickForm() {
      postAction('/BidAnnouncement/Save',this.form).then(res=>{
        if(res.statusCode == 200){
          this.$message.success('保存成功')
        }
      })
    },
    obtainDetails(){
      postAction('/BidAnnouncement/GetDetail',{id:this.record}).then(res=>{
        this.form = res.data
      })
    },
    //上传文件失败
    uploadError(err, file, fileList) {
      this.confirmLoading = false
      this.$message.error('文件上传失败')
      this.$refs[`upload`].clearFiles()
    },
    uploadSuccess(response, file, fileList) {
      if (response) {
        this.$message.success(`${file.name} 文件上传成功`)
        var _fileList = this.form['filesJson'] ? JSON.parse(this.form['filesJson']) : []

        _fileList.push({
          ...response.data,
          sizeName: Math.ceil(file.size / 1024) + 'KB',
        })
        this.$set(this.form, 'filesJson', JSON.stringify(_fileList))
        this.$forceUpdate()
      } else {
        this.$message.error(response.message)
      }

      this.$refs[`upload`].clearFiles()

    },

    delectFile(e) {
      var file = JSON.parse(this.form['filesJson'])
      file.splice(e.$index, 1)
      this.$set(this.form, 'filesJson', JSON.stringify(file))
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
<style scoped>
.about{
  padding: 20px 30px;
}
::v-deep(.el-form-item__content){
  /*display: flex;*/
}
.upload_file {
  width: 100%;
}
::v-deep(.el-form-item__content) {
  display: flex !important;
}
.upload_body {
  max-height: 350px;
  overflow: auto;
}

::v-deep(.el-upload) {
  width: 100%;
}

::v-deep(.upload_file .el-button) {
  color: #409EFF !important;
  background: #ecf5ff !important;
  border-color: #b3d8ff !important;
}
.editor_container /deep/ .ql-editor {
  min-height: 300px;
}
</style>