vue项目中引用富文本编辑器vue-quill-editor

1.安装依赖npm install vue-quill-editor --save
2.使用
（1）引入

import { quillEditor } from "vue-quill-editor";
import { Quill } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; //
import Upload from "@/components/plugins/upload";

//一定要引入这三个css，不然文本编辑器会变得奇奇怪怪的。
//可以在main.js中引入，也可以在具体使用的.vue文件中引入
//注册 Vue.use(quillEditor)或者components: {quillEditor}

（2）引用

quill-editor

图片或者视频的上传也可以使用自定义组件

工具栏toolbar的显示可以自定义

toolbarOptions

自定义image和video的显示

vue-quill-editor Api使用

如果需要改变文本域部分的样式，如下：

.ql-toolbar {
  &.ql-snow {
    .ql-formats {
      margin-right: 0;
    }
    .ql-picker {
      height: 31px;
    }
  }
}
.link {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: right;
  padding-right: 10px;
  i {
    font-size: 20px;
  }
}
.quill-editor {
  line-height: normal;
  height: 500px;
  margin-bottom: 50px;
  .ql-video {
    video {
      width: 100%;
    }
  }
}

完整的代码如下