vue-quill-editor 富文本编辑器上传视频_vue-quill-editor上传视频_*且听风吟的博客-CSDN博客
vue+elementui+自定义Vue-Quill-Editor富文本框(一)_quill-editor 行间距-CSDN博客
<template>
<div class="quill-edit-container">
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@blur="onEditorBlur"
@focus="onEditorFocus"
@change="onEditorChange"
/>
<el-upload
action="#"
:before-upload="beforeUploadVideo"
name="files"
class="pictureQuillVideo"
:on-success="handleVideoSuccess"
:show-file-list="false"
style="display: none"
:http-request="uploadfile"
/>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import * as Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 行高
import { lineHeightStyle } from './lineHeight.js'
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
// 行间距
import { letterSpacingStyle } from './letterSpacing.js'
Quill.register({ 'formats/letterSpacing': letterSpacingStyle }, true)
// 视频
import Video from './video.js'
Quill.register(Video, true)
export default {
name: 'EpRichTextEditor',
components: {
quillEditor
},
props: {
defaultContent: {
type: String,
default: '<p>请输入</p>'
}
},
data() {
return {
// action: process.env.VUE_APP_API_BASE_URL + '/sp/news/upload',
action: 'http://localhost:8080/sp/news/upload',
uploadheader: {
// 'Authorization': 'Bearer ' + store.state?.loginUserInfo?.token || null,
},
content: '',
editorOption: {
placeholder:'请输入内容',
modules: {
toolbar: {
container: [
['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: [] }], // 对齐方式
[{ lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }], //行高
[{ letterSpacing: [ 'initial','2px','4px', '6px','8px','10px', '12px', '14px', '16px'],},], //行间距
['clean'], // 清除字体样式
['image', 'video'] // 上传图片、上传视频
],
handlers: {
letterSpacing: function (value) {
if (value) {
this.quill.format('letterSpacing', value)
} else {
console.log(value)
}
},
lineheight: function (value) {
if (value) {
this.quill.format('lineHeight', value)
} else {
console.log(value)
}
},
video: function (value) {
if (value) {
document.querySelector('.pictureQuillVideo input').click()
} else {
this.quill.format('video', false)
}
},
}
}
},
theme: 'snow',
imageResize: {}
},
//视频
videoFlag: false,
//是否显示进度条
videoUploadPercent: '',
//进度条的进度,
isShowUploadVideo: false,
//显示上传按钮
videoForm: {
showVideoPath: '',
},
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted(){
// 富文本工具栏提示
addQuillTitle()
//解决文本框赋值后获取焦点
this.$refs.myQuillEditor.quill.enable(false)
this.$nextTick(function () {
this.$refs.myQuillEditor.quill.enable(true)
this.$refs.myQuillEditor.quill.blur()
})
},
methods: {
/** --------- 视频上传相关 start --------- */
insertVideoLink (videoLink) {
console.log('insertVideoLink');
if (!videoLink) return this.$message.error('视频地址不能为空!')
this.videoForm.show = false
let quill = this.$refs['myQuillEditor'].quill
// 获取富文本
let range = quill.getSelection()
// 获取光标位置:当编辑器中没有输入文本时,这里获取到的 range 为 null
let index = range ? range.index : 0
// 在光标所在位置 插入视频
quill.insertEmbed(index, 'video', videoLink)
// 调整光标到最后
quill.setSelection(index + 1)
},
async uploadfile(file) {
let form = new FormData();
this.loading = true;
// 调用后端服务器的接口
form.append('files', file.file);
let res = await this.$api.uploadNewsFile2(form); //此方法返回上传后的id
if (res.code==200) {
let filePath = ' http://172.16.100.93:8080/sp/news/downloadFile/'+ res.data
this.insertVideoLink(filePath)
}
},
//富文本上传视频回调
beforeUploadVideo(file) {
var fileSize = file.size / 1024 / 1024 < 50
if (
[
'video/mp4',
'video/ogg',
'video/flv',
'video/avi',
'video/wmv',
'video/rmvb',
'video/mov',
].indexOf(file.type) == -1
) {
this.$message.error('请上传正确的视频格式')
return false
}
if (!fileSize) {
this.$message.error('视频大小不能超过50MB')
return false
}
this.isShowUploadVideo = false
},
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
onEditorReady(quill) {
console.log('editor ready!', quill)
},
onEditorChange() {
this.$emit('onChange', this.content)
} // 内容改变事件
},
watch: {
defaultContent: {
handler(newValue) {
this.content = newValue
}
}
}
}
</script>
<style lang="scss">
.quill-edit-container {
height: 100%;
// .ql-editor {
// min-height: 200px;
// }
}
p {
margin: 10px;
}
// .edit_container,
.quill-editor {
height: calc(100% - 86px);
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
.ql-snow .ql-picker-label{
padding-right: 20px;
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="行高"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
content: '默认';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
content: '1px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
content: '1.5px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
content: '1.75px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
content: '2px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
content: '3px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
content: '4px';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
content: '5px';
}
.ql-snow .ql-picker.ql-lineheight {
width: 70px;
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item::before {
content: '字符间距';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="字符间距"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='initial']::before {
content: '默认';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="2px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='2px']::before {
content: '2px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="4px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='4px']::before {
content: '4px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="6px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='6px']::before {
content: '6px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='8px']::before {
content: '8px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='10px']::before {
content: '10px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='12px']::before {
content: '12px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='14px']::before {
content: '14px';
}
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='16px']::before {
content: '16px';
}
.ql-snow .ql-picker.ql-letterSpacing {
width: 90px;
}
</style>
内容参考开头两篇文章,js文件参考第一篇文章中的js