360 lines
12 KiB
Vue
360 lines
12 KiB
Vue
<!--
|
||
* @Author: Aimee~
|
||
* @Date: 2023-12-18 13:31:13
|
||
* @LastEditTime: 2023-12-19 16:30:51
|
||
* @LastEditors: Aimee
|
||
* @FilePath: /water_dealer-agent/src/views/user/widgets/QuillEditorVue.vue
|
||
* @Description: vueQuillEditor
|
||
-->
|
||
<template>
|
||
<div class="VueQuillEditor">
|
||
<!-- 上传 -->
|
||
<a-upload class="quill-upload" :action="actionUrl" @change="handleChange" :show-upload-list="false" ref="aUpload">
|
||
</a-upload>
|
||
|
||
<div class="myQuillTitle">{{ title }}</div>
|
||
<quill-editor
|
||
v-model="content"
|
||
ref="myQuillEditor"
|
||
:options="editorOption"
|
||
@blur="onEditorBlur($event)"
|
||
@focus="onEditorFocus($event)"
|
||
@change="onEditorChange($event)"
|
||
@ready="onEditorReady($event)">
|
||
</quill-editor>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Quill from 'quill'
|
||
import { quillEditor } from 'vue-quill-editor'
|
||
import 'quill/dist/quill.core.css'
|
||
import 'quill/dist/quill.snow.css'
|
||
import 'quill/dist/quill.bubble.css'
|
||
|
||
import { ImageDrop } from 'quill-image-drop-module'
|
||
import ImageaResize from 'quill-image-resize-module'
|
||
import { ImageExtend } from 'quill-image-extend-module'
|
||
Quill.register('modules/imageResize', ImageaResize)
|
||
Quill.register('modules/imageExtend', ImageExtend)
|
||
Quill.register('modules/imageDrop', ImageDrop)
|
||
|
||
// 富文本顶部按钮
|
||
const toolbar = [
|
||
['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'], // 清除文本格式
|
||
['link', 'video'], // 链接、图片、视频
|
||
['myUploadBtn'] // 自定义上传按钮
|
||
]
|
||
// toolbar标题
|
||
const titleConfig = [
|
||
{ Choice: '.ql-insertMetric', title: '跳转配置' },
|
||
{ Choice: '.ql-bold', title: '加粗' },
|
||
{ Choice: '.ql-italic', title: '斜体' },
|
||
{ Choice: '.ql-underline', title: '下划线' },
|
||
{ Choice: '.ql-header', title: '段落格式' },
|
||
{ Choice: '.ql-strike', title: '删除线' },
|
||
{ Choice: '.ql-blockquote', title: '块引用' },
|
||
{ Choice: '.ql-code', title: '插入代码' },
|
||
{ Choice: '.ql-code-block', title: '插入代码段' },
|
||
{ Choice: '.ql-font', title: '字体' },
|
||
{ Choice: '.ql-size', title: '字体大小' },
|
||
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },
|
||
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },
|
||
{ Choice: '.ql-direction', title: '文本方向' },
|
||
{ Choice: '.ql-header[value="1"]', title: 'h1' },
|
||
{ Choice: '.ql-header[value="2"]', title: 'h2' },
|
||
{ Choice: '.ql-align', title: '对齐方式' },
|
||
{ Choice: '.ql-color', title: '字体颜色' },
|
||
{ Choice: '.ql-background', title: '背景颜色' },
|
||
{ Choice: '.ql-image', title: '图像' },
|
||
{ Choice: '.ql-video', title: '视频' },
|
||
{ Choice: '.ql-link', title: '添加链接' },
|
||
{ Choice: '.ql-formula', title: '插入公式' },
|
||
{ Choice: '.ql-clean', title: '清除字体格式' },
|
||
{ Choice: '.ql-script[value="sub"]', title: '下标' },
|
||
{ Choice: '.ql-script[value="super"]', title: '上标' },
|
||
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
|
||
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
|
||
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },
|
||
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
|
||
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
|
||
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
|
||
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
|
||
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
|
||
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
|
||
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
|
||
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
|
||
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
|
||
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
|
||
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
|
||
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
|
||
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
|
||
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
|
||
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
|
||
]
|
||
// 遍历中文
|
||
for (const item of titleConfig) {
|
||
const tip = document.querySelector('.quill-editor ' + item.Choice)
|
||
if (!tip) continue
|
||
tip.setAttribute('title', item.title)
|
||
}
|
||
|
||
export default {
|
||
name: 'QuillEditor',
|
||
components: { quillEditor },
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
}
|
||
},
|
||
content: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
}
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
// 富文本编辑器配置
|
||
editorOption: {
|
||
modules: {
|
||
history: { // 后退
|
||
delay: 1000,
|
||
maxStack: 50,
|
||
userOnly: false
|
||
},
|
||
imageDrop: true, // 可以拉图片
|
||
imageResize: {
|
||
displaySize: true // 修改图片大小
|
||
},
|
||
toolbar: {
|
||
container: toolbar,
|
||
handlers: {
|
||
myUploadBtn: this.myUploadBtnClick
|
||
}
|
||
}
|
||
},
|
||
placeholder: '请输入正文'
|
||
},
|
||
actionUrl: 'https://text.twmkeji.cn/api'
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initButton()
|
||
},
|
||
methods: {
|
||
// 失去焦点事件
|
||
onEditorBlur (quill) {
|
||
console.log('editor blur!', quill)
|
||
},
|
||
// 获得焦点事件
|
||
onEditorFocus (quill) {
|
||
console.log('editor focus!', quill)
|
||
},
|
||
// 准备富文本编辑器
|
||
onEditorReady (quill) {
|
||
console.log('editor ready!', quill)
|
||
},
|
||
// 内容改变事件
|
||
onEditorChange ({ quill, html, text }) {
|
||
// console.log('editor change!', quill, html, text)
|
||
this.$emit('updateHtml', html)
|
||
},
|
||
// 自定义按钮内容初始化
|
||
initButton () {
|
||
const myUploadBtn = document.querySelector('.ql-myUploadBtn')
|
||
myUploadBtn.innerHTML = '<i class="el-icon-picture" style="font-size:18px;color:black;"></i>'
|
||
},
|
||
// 自定义按钮的点击事件
|
||
myUploadBtnClick (e) {
|
||
this.$refs.aUpload.$children[0].$refs.uploaderRef.onClick()
|
||
},
|
||
// 上传图片生成
|
||
handleChange (e) {
|
||
const { file } = e
|
||
if (file.status === 'done') {
|
||
console.log('done...')
|
||
const url = file.response.data.url[0]
|
||
console.log(file.response.data.url)
|
||
this.quillSuccess(url)
|
||
}
|
||
},
|
||
// 插入逛飙图片
|
||
quillSuccess (url) {
|
||
const quill = this.$refs.myQuillEditor.quill
|
||
// 获取光标所在位置
|
||
const length = quill.getSelection().index
|
||
// // 插入图片 res.url 为服务器返回的图片地址
|
||
quill.insertEmbed(length, 'image', url)
|
||
// // 调整光标到最后
|
||
quill.setSelection(length + 1)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.myQuillTitle {
|
||
color: #222;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
/* // 这个是字号数字对应的显示的内容，vertical-align根据个人需要加不加，因为我页面那个字与其他对不齐 */
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
|
||
content: '12px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
|
||
content: '14px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
|
||
content: '16px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
|
||
content: '18px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
|
||
content: '20px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
|
||
content: '22px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
|
||
content: '24px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
|
||
content: '28px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
|
||
content: '32px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
|
||
content: '36px';
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* // 这个是字号数字对应的px值 */
|
||
.ql-editor .ql-size-12 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.ql-editor .ql-size-14 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ql-editor .ql-size-16 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.ql-editor .ql-size-18 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.ql-editor .ql-size-20 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.ql-editor .ql-size-22 {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.ql-editor .ql-size-24 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.ql-editor .ql-size-28 {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.ql-editor .ql-size-32 {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.ql-editor .ql-size-36 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
/* // 选择字号富文本字的大小 */
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
|
||
font-size: 36px;
|
||
}
|
||
</style>
|