vue富文本使用editor
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend } from "quill-image-extend-module"
import ImageResize from 'quill-image-resize-module'
import { ImageDrop } from 'quill-image-drop-module';
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
Quill.register("modules/ImageExtend", ImageExtend)
Quill.register("modules/ImageResize", ImageResize)
Quill.register('modules/imageDrop', ImageDrop);
export default {
components: {
quillEditor,
},
data() {
return {
editorOption: {
placeholder: "编辑文章内容",
theme: 'snow',
modules: {
clipboard: {
// 粘贴板，处理粘贴图片 *** 主要是这里
matchers: [[Node.ELEMENT_NODE, this.desMatcher]],
},
imageDrop: true,
imageResize: { //添加
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white'
},
modules: ['Resize', 'DisplaySize', 'Toolbar']
},
ImageExtend: {
loading: true,
name: "pictureFile",
},
toolbar: {
// container: container,
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: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['image'] // 链接、图片，需要视频的可以加上video
],
// 拦截
handlers: {
image: function (value) {
if (value) {
document.querySelector('#upload').click()
}
}
}
}
}
},
isDisable: false,
wordNumber: ''
};
},
methods: {
changeUpload(e) {
let file = e.target.files[0]
const formData = new FormData()
formData.append('file', file)
this.$axios({
method: "post",
url: "/sys/fileOps/uploadFile",
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((res) => {
let quill = this.$refs.myQuillEditor.quill
if (res.data.code === 200) {
//光标位置
let length = quill.getSelection().index
// 插入图
quill.insertEmbed(length, "image", res.data.data)
// 调整光标
quill.setSelection(length + 1)
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
console.log(err, '===');
this.$message.error('系统错误');
});
},
//内容改变事件
onEditorChange({ quill, html, text }) {
this.wordNumber = text
},
// 复制图片判断
desMatcher(node, Delta) {
console.log(Delta, '===')
let ops = []
Delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，所以可以这样处理
ops.push({
insert: op.insert,
})
} else {
if (op.insert.image.includes('file://') || op.insert.image.includes('data:image')) { //本地图片会使文件file开头
this.$message.warning('不允许粘贴图片,请手动上传')
} else {
ops.push({
insert: op.insert,
})
}
}
})
Delta.ops = ops
return Delta
}
},
created() { },
mounted() { },
};