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> |
|||
<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> |
|||
|
|||
<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 * as Quill from 'quill' |
|||
// quill编辑器的字体 |
|||
// 'Times-New-Roman', |
|||
|
|||
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 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: '两端对齐' } |
|||
] |
|||
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 { |
|||
name: 'TestQuillEditor', |
|||
components: { quillEditor }, |
|||
name: 'Editor', |
|||
props: { |
|||
// 编辑器的内容 |
|||
editorContent: { |
|||
value: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
editorRef: { |
|||
type: String, |
|||
required: true |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
content: this.editorContent, |
|||
editorOption: { |
|||
quill: null, |
|||
file: null, |
|||
options: { |
|||
theme: 'snow', |
|||
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 |
|||
} |
|||
}, |
|||
computed: { |
|||
// 当前富文本实例 |
|||
editor() { |
|||
return this.$refs.editorRef.quillEditor |
|||
} |
|||
}, |
|||
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() { |
|||
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: { |
|||
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> |
|||
<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