6 changed files with 512 additions and 183 deletions
-
3package.json
-
49src/api/faceRecognition/index.js
-
334src/components/quillEditor/index.vue
-
180src/components/quillEditor/index3.vue
-
111src/views/faceRecognition/personInfoManage.vue
-
18src/views/inquiryMachine/content.vue
@ -0,0 +1,49 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
import qs from 'qs' |
||||
|
|
||||
|
// // 编辑智慧大屏后台参数
|
||||
|
// export function FetchEditScreenSetting(parameter) {
|
||||
|
// return request({
|
||||
|
// url: 'api/screenSetting/editScreenSetting',
|
||||
|
// method: 'post',
|
||||
|
// data: parameter
|
||||
|
// })
|
||||
|
// }
|
||||
|
|
||||
|
export function add(data) { |
||||
|
return request({ |
||||
|
url: 'api/person/editPersonInfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function edit(data) { |
||||
|
return request({ |
||||
|
url: 'api/person/editPersonInfo', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// export function del(data) {
|
||||
|
// return request({
|
||||
|
// url: 'api/queryMachine/deleteQueryTopic',
|
||||
|
// method: 'post',
|
||||
|
// data
|
||||
|
// })
|
||||
|
// }
|
||||
|
|
||||
|
// 根据id查看人员详细信息
|
||||
|
export function FetchPersonInfoById(params) { |
||||
|
return request({ |
||||
|
url: 'api/person/getPersonInfoById' + '?' + qs.stringify(params, { indices: false }), |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
add, |
||||
|
edit, |
||||
|
FetchPersonInfoById |
||||
|
} |
||||
@ -1,180 +1,236 @@ |
|||||
<template> |
<template> |
||||
<quill-editor |
|
||||
:id="randomId(3)" |
|
||||
:ref="editorRef" |
|
||||
v-model="content" |
|
||||
:options="editorOption" |
|
||||
class="editor" |
|
||||
@focus="onEditorFocus($event)" |
|
||||
@blur="onEditorBlur($event)" |
|
||||
@change="onEditorChange($event)" |
|
||||
/> |
|
||||
|
<!-- <keep-alive> --> |
||||
|
<div> |
||||
|
<div ref="editorContainer" class="editor" style="height: 450px; overflow-y: scroll;" /> |
||||
|
</div> |
||||
|
<!-- </keep-alive> --> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
// https://blog.51cto.com/cplvfx/5931866 |
|
||||
// https://www.jianshu.com/p/ceb30ec66d20 |
|
||||
// https://www.cnblogs.com/chenxdnote/p/17611756.html |
|
||||
import { Quill, quillEditor } from 'vue-quill-editor' |
|
||||
import 'quill/dist/quill.core.css' // import styles |
|
||||
import 'quill/dist/quill.snow.css' // for snow theme |
|
||||
import 'quill/dist/quill.bubble.css' // for bubble theme |
|
||||
// 自定义的字体和文字大小样式 |
|
||||
|
import { upload } from '@/utils/upload' |
||||
|
import Quill from 'quill' |
||||
|
import 'quill/dist/quill.snow.css' |
||||
import '@/assets/styles/quillEditor.css' |
import '@/assets/styles/quillEditor.css' |
||||
// import * as Quill from 'quill' |
|
||||
// quill编辑器的字体 |
|
||||
// 'Times-New-Roman', |
|
||||
|
|
||||
var fonts = [ |
var fonts = [ |
||||
'SimSun', |
|
||||
'SimHei', |
|
||||
'Microsoft-YaHei', |
|
||||
'KaiTi', |
|
||||
'FangSong', |
|
||||
'Arial', |
|
||||
'sans-serif' |
|
||||
|
'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif' |
||||
] |
] |
||||
|
|
||||
// 自定义字号的大小 |
// 自定义字号的大小 |
||||
var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'] |
var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'] |
||||
|
|
||||
var Size = Quill.import('formats/size') |
var Size = Quill.import('formats/size') |
||||
Size.whitelist = sizes |
Size.whitelist = sizes |
||||
var Font = Quill.import('formats/font') |
var Font = Quill.import('formats/font') |
||||
Font.whitelist = fonts // 将字体加入到白名单 |
Font.whitelist = fonts // 将字体加入到白名单 |
||||
Quill.register(Font, true) |
Quill.register(Font, true) |
||||
|
|
||||
const toolbarOptions = [ |
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike'] |
|
||||
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block'] |
|
||||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] |
|
||||
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] |
|
||||
[{ indent: '-1' }, { indent: '+1' }], |
|
||||
[{ size: sizes }], // 配置字号 |
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }] |
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }] |
|
||||
[{ font: fonts }], // 显示字体选择 |
|
||||
[{ align: [] }], // 对齐方式-----[{ align: [] }] |
|
||||
['clean'], // 清除文本格式-----['clean'] |
|
||||
['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video'] |
|
||||
] |
|
||||
|
|
||||
// 工具栏功能提示 |
|
||||
const titleConfig = [ |
|
||||
{ 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-upload', 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: '两端对齐' } |
|
||||
] |
|
||||
|
const titleConfig = { |
||||
|
'ql-bold': '加粗', |
||||
|
'ql-color': '颜色', |
||||
|
'ql-font': '字体', |
||||
|
'ql-code': '插入代码', |
||||
|
'ql-italic': '斜体', |
||||
|
'ql-link': '添加链接', |
||||
|
'ql-background': '颜色', |
||||
|
'ql-size': '字体大小', |
||||
|
'ql-strike': '删除线', |
||||
|
'ql-script': '上标/下标', |
||||
|
'ql-underline': '下划线', |
||||
|
'ql-blockquote': '引用', |
||||
|
'ql-header': '标题', |
||||
|
'ql-indent': '缩进', |
||||
|
'ql-list': '列表', |
||||
|
'ql-align': '文本对齐', |
||||
|
'ql-direction': '文本方向', |
||||
|
'ql-code-block': '代码块', |
||||
|
'ql-formula': '公式', |
||||
|
'ql-image': '图片', |
||||
|
'ql-video': '视频', |
||||
|
'ql-clean': '清除字体样式', |
||||
|
'ql-upload': '文件', |
||||
|
'ql-table': '插入表格', |
||||
|
'ql-table-insert-row': '插入行', |
||||
|
'ql-table-insert-column': '插入列', |
||||
|
'ql-table-delete-row': '删除行', |
||||
|
'ql-table-delete-column': '删除列' |
||||
|
} |
||||
|
|
||||
export default { |
export default { |
||||
name: 'TestQuillEditor', |
|
||||
components: { quillEditor }, |
|
||||
|
name: 'Editor', |
||||
props: { |
props: { |
||||
// 编辑器的内容 |
|
||||
editorContent: { |
|
||||
|
value: { |
||||
type: String, |
type: String, |
||||
required: true |
|
||||
}, |
|
||||
editorRef: { |
|
||||
type: String, |
|
||||
required: true |
|
||||
|
default: '' |
||||
} |
} |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
content: this.editorContent, |
|
||||
editorOption: { |
|
||||
|
quill: null, |
||||
|
file: null, |
||||
|
options: { |
||||
theme: 'snow', |
theme: 'snow', |
||||
modules: { |
modules: { |
||||
toolbar: toolbarOptions |
|
||||
} |
|
||||
|
toolbar: { |
||||
|
container: [ |
||||
|
['bold', 'italic', 'underline', 'strike'], |
||||
|
[{ header: 1 }, { header: 2 }], |
||||
|
[{ list: 'ordered' }, { list: 'bullet' }], |
||||
|
[{ script: 'sub' }, { script: 'super' }], |
||||
|
[{ indent: '-1' }, { indent: '+1' }], |
||||
|
[{ color: [] }, { background: [] }], |
||||
|
[{ size: sizes }], |
||||
|
[{ font: fonts }], |
||||
|
[{ align: [] }], |
||||
|
['link', 'image'], |
||||
|
['clean'], |
||||
|
[ |
||||
|
{ table: 'TD' }, |
||||
|
{ 'table-insert-row': 'TIR' }, |
||||
|
{ 'table-insert-column': 'TIC' }, |
||||
|
{ 'table-delete-row': 'TDR' }, |
||||
|
{ 'table-delete-column': 'TDC' } |
||||
|
] |
||||
|
], |
||||
|
handlers: { |
||||
|
image: function(value) { |
||||
|
if (value) { |
||||
|
const input = document.createElement('input') |
||||
|
input.setAttribute('type', 'file') |
||||
|
input.setAttribute('accept', 'image/*') |
||||
|
|
||||
|
input.addEventListener('change', (e) => { |
||||
|
const file = e.target.files[0] |
||||
|
if (file) { |
||||
|
this.file = file |
||||
|
console.log('选中的图片文件:', file) |
||||
|
console.log('文件名称:', file.name) |
||||
|
console.log('文件大小:', file.size) |
||||
|
console.log('文件类型:', file.type) |
||||
|
|
||||
|
// 执行上传逻辑 |
||||
|
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API |
||||
|
|
||||
|
upload(linkSrc + '/api/fileRelevant/uploadOtherImg', this.file).then(res => { |
||||
|
if (res.data.code === 200) { |
||||
|
const imageUrl = linkSrc + '/api/fileRelevant/getImg?imgType=1&imgId=' + res.data.data |
||||
|
console.log('图片URL:', imageUrl) |
||||
|
const range = this.quill.getSelection() |
||||
|
if (range) { |
||||
|
// 在光标位置插入图片 |
||||
|
this.quill.insertEmbed(range.index, 'image', imageUrl) |
||||
|
// 移动光标到图片后面 |
||||
|
this.quill.setSelection(range.index + 1) |
||||
|
} else { |
||||
|
this.quill.insertEmbed(this.quill.getLength(), 'image', imageUrl) |
||||
|
} |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.error('上传失败:', err) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
input.click() |
||||
|
} else { |
||||
|
this.quill.format('image', false) |
||||
|
} |
||||
|
}, |
||||
|
table: function(val) { |
||||
|
this.quill.getModule('table').insertTable(2, 3) |
||||
|
}, |
||||
|
'table-insert-row': function() { |
||||
|
this.quill.getModule('table').insertRowBelow() |
||||
|
}, |
||||
|
'table-insert-column': function() { |
||||
|
this.quill.getModule('table').insertColumnRight() |
||||
|
}, |
||||
|
'table-delete-row': function() { |
||||
|
this.quill.getModule('table').deleteRow() |
||||
|
}, |
||||
|
'table-delete-column': function() { |
||||
|
this.quill.getModule('table').deleteColumn() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
table: true |
||||
|
}, |
||||
|
placeholder: '' |
||||
}, |
}, |
||||
titleConfig |
titleConfig |
||||
} |
} |
||||
}, |
}, |
||||
computed: { |
|
||||
// 当前富文本实例 |
|
||||
editor() { |
|
||||
return this.$refs.editorRef.quillEditor |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
watch: { |
||||
editorContent() { |
|
||||
this.content = this.editorContent |
|
||||
|
value(newVal) { |
||||
|
if (newVal === this.quill.root.innerHTML) return |
||||
|
this.quill.setContents([]) |
||||
|
this.quill.clipboard.dangerouslyPasteHTML(0, newVal) |
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '' |
|
||||
for (const item of this.titleConfig) { |
|
||||
const tip = document.querySelector('.quill-editor ' + item.Choice) |
|
||||
if (!tip) continue |
|
||||
tip.setAttribute('title', item.title) |
|
||||
|
const dom = this.$refs.editorContainer |
||||
|
this.quill = new Quill(dom, this.options) |
||||
|
|
||||
|
if (this.value) { |
||||
|
this.quill.clipboard.dangerouslyPasteHTML(this.value) |
||||
} |
} |
||||
|
|
||||
|
// 监听内容变化并发射事件 |
||||
|
// this.quill.on('text-change', () => { |
||||
|
// const content = this.quill.root.innerHTML |
||||
|
// console.log('content', content) |
||||
|
// // this.$emit('input', content) |
||||
|
// // this.$emit('contentData', content) |
||||
|
// }) |
||||
|
|
||||
|
// 设置表格相关图标 |
||||
|
this.$el.querySelector('.ql-table-insert-row').innerHTML = |
||||
|
`<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="18"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>` |
||||
|
|
||||
|
this.$el.querySelector('.ql-table-insert-column').innerHTML = |
||||
|
`<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="18"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>` |
||||
|
|
||||
|
this.$el.querySelector('.ql-table-delete-row').innerHTML = |
||||
|
`<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="18"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>` |
||||
|
|
||||
|
this.$el.querySelector('.ql-table-delete-column').innerHTML = |
||||
|
`<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="18"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>` |
||||
|
|
||||
|
this.addQuillTitle() |
||||
}, |
}, |
||||
|
// activated() { |
||||
|
// if (this.value && this.quill) { |
||||
|
// this.quill.clipboard.dangerouslyPasteHTML(this.value) |
||||
|
// } |
||||
|
// }, |
||||
methods: { |
methods: { |
||||
randomId(len) { |
|
||||
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' |
|
||||
var tempLen = chars.length |
|
||||
var tempStr = '' |
|
||||
for (var i = 0; i < len; ++i) { |
|
||||
tempStr += chars.charAt(Math.floor(Math.random() * tempLen)) |
|
||||
} |
|
||||
return tempStr |
|
||||
|
addQuillTitle() { |
||||
|
const oToolBar = document.querySelector('.ql-toolbar') |
||||
|
const aButton = oToolBar.querySelectorAll('button') |
||||
|
const aSelect = oToolBar.querySelectorAll('select') |
||||
|
|
||||
|
aButton.forEach(function(item) { |
||||
|
if (item.className === 'ql-script') { |
||||
|
item.value === 'sub' ? (item.title = '下标') : (item.title = '上标') |
||||
|
} else if (item.className === 'ql-indent') { |
||||
|
item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进') |
||||
|
} else { |
||||
|
item.title = titleConfig[item.classList[0]] |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
aSelect.forEach(function(item) { |
||||
|
item.parentNode.title = titleConfig[item.classList[0]] |
||||
|
}) |
||||
|
}, |
||||
|
getHtmlContent() { |
||||
|
return this.quill.root.innerHTML |
||||
}, |
}, |
||||
// 准备富文本编辑器 |
|
||||
onEditorReady() {}, |
|
||||
// 富文本编辑器 失去焦点事件 |
|
||||
onEditorBlur() {}, |
|
||||
// 富文本编辑器 获得焦点事件 |
|
||||
onEditorFocus() {}, |
|
||||
// 富文本编辑器 内容改变事件 |
|
||||
onEditorChange({ html }) { |
|
||||
// 内容改变事件 |
|
||||
// console.log('内容改变事件'); |
|
||||
this.$emit('input', this.content) |
|
||||
|
getDeltaContent() { |
||||
|
return this.quill.getContents() |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
<style> |
|
||||
.ql-editor{ |
|
||||
height: 400px; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,180 @@ |
|||||
|
<template> |
||||
|
<quill-editor |
||||
|
:id="randomId(3)" |
||||
|
:ref="editorRef" |
||||
|
v-model="content" |
||||
|
:options="editorOption" |
||||
|
class="editor" |
||||
|
@focus="onEditorFocus($event)" |
||||
|
@blur="onEditorBlur($event)" |
||||
|
@change="onEditorChange($event)" |
||||
|
/> |
||||
|
</template> |
||||
|
<script> |
||||
|
// https://blog.51cto.com/cplvfx/5931866 |
||||
|
// https://www.jianshu.com/p/ceb30ec66d20 |
||||
|
// https://www.cnblogs.com/chenxdnote/p/17611756.html |
||||
|
import { Quill, quillEditor } from 'vue-quill-editor' |
||||
|
import 'quill/dist/quill.core.css' // import styles |
||||
|
import 'quill/dist/quill.snow.css' // for snow theme |
||||
|
import 'quill/dist/quill.bubble.css' // for bubble theme |
||||
|
// 自定义的字体和文字大小样式 |
||||
|
import '@/assets/styles/quillEditor.css' |
||||
|
// import * as Quill from 'quill' |
||||
|
// quill编辑器的字体 |
||||
|
// 'Times-New-Roman', |
||||
|
var fonts = [ |
||||
|
'SimSun', |
||||
|
'SimHei', |
||||
|
'Microsoft-YaHei', |
||||
|
'KaiTi', |
||||
|
'FangSong', |
||||
|
'Arial', |
||||
|
'sans-serif' |
||||
|
] |
||||
|
// 自定义字号的大小 |
||||
|
var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'] |
||||
|
var Size = Quill.import('formats/size') |
||||
|
Size.whitelist = sizes |
||||
|
var Font = Quill.import('formats/font') |
||||
|
Font.whitelist = fonts // 将字体加入到白名单 |
||||
|
Quill.register(Font, true) |
||||
|
|
||||
|
const toolbarOptions = [ |
||||
|
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike'] |
||||
|
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block'] |
||||
|
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] |
||||
|
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] |
||||
|
[{ indent: '-1' }, { indent: '+1' }], |
||||
|
[{ size: sizes }], // 配置字号 |
||||
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }] |
||||
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }] |
||||
|
[{ font: fonts }], // 显示字体选择 |
||||
|
[{ align: [] }], // 对齐方式-----[{ align: [] }] |
||||
|
['clean'], // 清除文本格式-----['clean'] |
||||
|
['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video'] |
||||
|
] |
||||
|
|
||||
|
// 工具栏功能提示 |
||||
|
const titleConfig = [ |
||||
|
{ 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-upload', 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: '两端对齐' } |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'TestQuillEditor', |
||||
|
components: { quillEditor }, |
||||
|
props: { |
||||
|
// 编辑器的内容 |
||||
|
editorContent: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
editorRef: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
content: this.editorContent, |
||||
|
editorOption: { |
||||
|
theme: 'snow', |
||||
|
modules: { |
||||
|
toolbar: toolbarOptions |
||||
|
} |
||||
|
}, |
||||
|
titleConfig |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 当前富文本实例 |
||||
|
editor() { |
||||
|
return this.$refs.editorRef.quillEditor |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
editorContent() { |
||||
|
this.content = this.editorContent |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '' |
||||
|
for (const item of this.titleConfig) { |
||||
|
const tip = document.querySelector('.quill-editor ' + item.Choice) |
||||
|
if (!tip) continue |
||||
|
tip.setAttribute('title', item.title) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
randomId(len) { |
||||
|
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' |
||||
|
var tempLen = chars.length |
||||
|
var tempStr = '' |
||||
|
for (var i = 0; i < len; ++i) { |
||||
|
tempStr += chars.charAt(Math.floor(Math.random() * tempLen)) |
||||
|
} |
||||
|
return tempStr |
||||
|
}, |
||||
|
// 准备富文本编辑器 |
||||
|
onEditorReady() {}, |
||||
|
// 富文本编辑器 失去焦点事件 |
||||
|
onEditorBlur() {}, |
||||
|
// 富文本编辑器 获得焦点事件 |
||||
|
onEditorFocus() {}, |
||||
|
// 富文本编辑器 内容改变事件 |
||||
|
onEditorChange({ html }) { |
||||
|
// 内容改变事件 |
||||
|
// console.log('内容改变事件'); |
||||
|
this.$emit('input', this.content) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.ql-editor{ |
||||
|
height: 400px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue