使用vue-quill-editor遇到的坑
html
·
1.字体样式设置失效,eg:加粗,倾斜,下划线等等
是因为被全局的样式覆盖了
2.视频添加链接,随便输入地址,默认就变成了自己本地项目的地址,而且他的视频是嵌入式的(把我的项目整个都嵌入进来了),使用审查元素查看是iframe标签,我就把iframe标签改成video标签
// 在项目中引入vue-quill-editor
import { Quill } from 'vue-quill-editor'
// 在mounted中调用
mounted() {
this.videoList()
},
// 自定义视频
videoList() {
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')
const ATTRIBUTES = ['height', 'width']
class Video extends BlockEmbed {
static create(value) {
const node = super.create(value)
// 添加video标签所需的属性
node.setAttribute('controls', 'controls')
node.setAttribute('type', 'video/mp4')
node.setAttribute('autoplay', true)
node.setAttribute('src', this.sanitize(value))
return node
}
static formats(domNode) {
return ATTRIBUTES.reduce((formats, attribute) => {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute)
}
return formats
}, {})
}
static sanitize(url) {
return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
}
static value(domNode) {
return domNode.getAttribute('src')
}
format(name, value) {
if (ATTRIBUTES.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value)
} else {
this.domNode.removeAttribute(name)
}
} else {
super.format(name, value)
}
}
html() {
const { video } = this.value()
return `<a href="${video}">${video}</a>`
}
}
Video.blotName = 'video' // 直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe
Quill.register(Video)
},
3:添加链接时,随便输入url地址,也是跳到自己本地,只能重新配置了
参考链接:https://blog.csdn.net/HH18700418030/article/details/120063170
4.富文本编辑vue-quill-editor自定义图片、文件上传
参考链接:https://www.jianshu.com/p/9e4e4d955d0f
html
<template>
<div class="quillEditor">
<el-upload
:show-upload-list="false"
:http-request="fileUpload"
:before-upload="handleFileBeforeUpload"
type="drag"
multiple
action=""
:accept="'file/*'"
class="uploadFile">
<el-button class="el-icon-upload"></el-button>
</el-upload>
<quill-editor ref="myQuillEditor"
v-model="messageContentEditor"
:options="editorOption">
</quill-editor>
</div>
</template>
css 加入icon,以及隐藏上传按钮
.quillEditor {
::v-deep .ql-editor {
height: 300px;
}
::v-deep .ql-snow.ql-toolbar .ql-upload {
background: url("https://img2.baidu.com/it/u=4269024829,236711023&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=468");
background-size: 42px 42px;
background-position: center center;
background-repeat: no-repeat;
}
.uploadFile {
width: 0;
height: 0;
display: none;
}
}
js
import { Quill } from 'vue-quill-editor'
// 工具栏配置
let toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
[{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
[{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }], // 字体颜色、[{ color: [] }, { background: [] }]
[{ background: [] }],// 字体背景颜色-----
[{ font: [] }], // 字体种类-----[{ font: [] }]
[{ align: [] }], // 对齐方式-----[{ align: [] }]
['clean'], // 清除文本格式-----['clean']
['link', 'image', 'video', 'upload'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
data() {
return {
//富文本编辑器配置
editorOption: {
// 富文本编辑器配置
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
'upload': (value) => {
if (value) {
document.querySelector('.uploadFile input').click()
}
}
}
}
},
theme: 'snow',
placeholder: '请输入正文'
},
messageContentEditor: ''
}
},
mounted() {
this.downloadList()
},
methods: {
// 自定义插入download
downloadList() {
let BlockEmbed = Quill.import('blots/block/embed')
class download extends BlockEmbed {
static create(value) {
let node
node = super.create(value.href)
node.setAttribute('href', value.href)
node.setAttribute('download', value.innerText)
node.setAttribute('target', '_self')
node.onclick = function () {
window.location.href = value.href
}
node.innerText = value.innerText
node.download = value.innerText
return node
}
}
download.blotName = 'download'
download.tagName = 'a'
Quill.register(download)
},
// 文件上传
fileUpload(param) {
let formData = new FormData()
formData.append('file', param.file)
接口.then(response => {
if (response.code === 200) {
// 调用成功后的回调
param.onSuccess(param)
this.handleFileSuccess(param.file, response.data)
}
})
},
//判断上传的是否符合要求
handleFileBeforeUpload(file) {
if (this.updateFileSize != '') {
let isLt2M = file.size / 1024 / 1024 < 10
if (isLt2M > this.updateFileSize) {
this.$message({
message: '您上传的文件大小已超出允许范围',
type: 'warning'
})
return false
}
}
},
// 文件上传成功
handleFileSuccess(file, response) {
let fileNameLength = file.name.length
let url = 'url地址'
// 插入链接
let quill = this.$refs.myQuillEditor.quill
// 获取光标所在位置
let length = quill.getSelection().index
quill.insertEmbed(length, 'download', { href: url, innerText: file.name, target: '_self' }, 'api')
// 调整光标到最后
quill.setSelection(length + fileNameLength)
this.upLoadList()
},
upLoadList() {
var revoke = document.querySelector('.ql-upload') //获取元素
var Front = document.createElement('i') //创建元素
// Front.className = 'el-icon-upload' //新增class属性
revoke.appendChild(Front) //追加到元素中
}
}
}
查看 会遇到样式失效的问题
// 开始直接这样写,发现设置的样式,在查看里面没有了
<div v-html="content"></div>
// 经过查看资料,加了一些类目,就欧克了
<div class="richTextStyle ql-snow">
<div class="ql-editor" v-html="lookMessageForm.noticeContent"></div>
</div>
图片位置调整以及改变大小
效果图:
更多推荐
已为社区贡献2条内容
所有评论(0)