vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大。
插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-quill-editor内部的某些方法进行更改
该方法使用了 element-ui 和 文件上传七牛
一、npm 安装 vue-quill-editor
二、在main.js中引入
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)
HTML部分:为编辑器绑定各个API事件,定义一个隐藏的input框,用于点击图片或者视频图标上传文件
@change="onEditorChange($event)">
ref="upload" style="display:none">
点击上传
CSS部分:
.quill-editor {
height: 745px;
.ql-container {
height: 680px;
}
}
.limit {
height: 30px;
border: 1px solid #ccc;
line-height: 30px;
text-align: right;
span {
color: #ee2a7b;
}
}
.ql-snow .ql-editor img {
max-width: 480px;
}
.ql-editor .ql-video {
max-width: 480px;
}
JS部分ÿ