组件:
<template>
<div class='edit-container'>
<!-- 图片上传组件辅助-->
<el-upload
class="image-uploader"
:action="serverUrl"
accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
id="quill-upload">
</el-upload>
<!--富文本编辑器组件-->
<el-row v-loading="quillUpdateImg">
<quill-editor
v-model="remark"
ref="myQuillEditor"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
</el-row>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import ImageResize from 'quill-image-resize-module'
import * as Quill from 'quill'
Quill.register('modules/imageResize', ImageResize)
export default {
name: 'RichTextEditor',
components: { quillEditor },
props: {
content: String
},
data() {
return {
quillUpdateImg: false,
remark: this.content,
serverUrl: '/ecomme-manager/v1.0/file/upload/anon', // 此处为服务器上传地址
imagePrefix: this.IMAGEURL,
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: [] }], // 对齐方式
['clean'], // 清除字体样式
['link', 'image'] // 上传图片、上传视频
],
handlers: {
image: function(value) {
if (value) {
// 触发隐藏的图片上传,选择图片文件
document.querySelector('.image-uploader .el-upload__input').click()
} else {
this.quill.format('image', false)
}
}
}
},
imageResize: {
displayStyles: {
backgroundColor:'black',
border:'none',
color:'white'
},
modules:['Resize','DisplaySize','Toolbar']
}
},
theme: 'snow'
}
}
},
computed: {},
watch: {
content: function(newVal, oldVal) {
this.remark = newVal
}
},
created() {},
mounted() {},
methods: {
// 内容改变事件
onEditorChange() {
this.$emit('onEditorChange', this.remark)
},
// 上传图片前
beforeUpload(res, file) {
this.quillUpdateImg = true
},
// 上传图片成功
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
const quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if (res.code === 200 && res.result !== null) {
// 获取光标所在位置
const length = quill.getSelection().index
// 插入图片为服务器返回的图片地址
const imgUrl = `${this.imagePrefix}${res.data.filePath}`
quill.insertEmbed(length, 'image', imgUrl)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
this.quillUpdateImg = false
},
// 上传图片失败
uploadError(res, file) {
// loading动画消失
this.quillUpdateImg = false
this.$message.error('图片插入失败')
}
}
}
</script>
<style>
.edit_container,
.quill-editor {
display: flex;
flex-direction: column;
width: 960px;
}
.edit-container .image-uploader {
width: 0px;
line-height: 0;
}
.quill-editor .ql-container {
height: 420px;
overflow-y: auto;
}
.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: "等宽字体";
}
</style>
引入:
import RichText from '@c/RichTextEditor'
<rich-text :content="groupForm.content" @onEditorChange="onEditorChange" ref="textEditor"></rich-text>
onEditorChange(val) {
this.groupForm.content = val
}