88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
import Quill from "quill"
|
|
import 'quill/dist/quill.snow.css'
|
|
|
|
// 富文本组件
|
|
export default {
|
|
name: 'QuillRichInput',
|
|
props: ['readonly', 'placeholder', 'scroll', 'modelValue', 'mode'],
|
|
data() {
|
|
return {
|
|
ReadOnlyMode: false,
|
|
Placeholder: '在这里输入描述信息...',
|
|
ScrollingContainer: null,
|
|
editor: null,
|
|
content: ''
|
|
}
|
|
},
|
|
watch: {
|
|
readonly(val) {
|
|
this.ReadOnlyMode = val
|
|
},
|
|
placeholder(val) {
|
|
if (val) this.Placeholder = val
|
|
},
|
|
scroll(val) {
|
|
this.ScrollingContainer = val
|
|
},
|
|
// modelValue(val) {
|
|
// // 这样不行，会导致编辑时富文本内容是反过来的...
|
|
// //console.log('[modelValue] val is: ', val)
|
|
// this.editor && this.editor.setContents(JSON.parse(val), "user")
|
|
// }
|
|
modelValue(val) {
|
|
// 如果 mode 是 detail 就不允许编辑
|
|
if (this.mode === 'detail') this.editor && this.editor.enable(false)
|
|
// 只在 mode 不为 create 的时候，才加载数据
|
|
if (val && this.mode !== 'create') {
|
|
// this.mode 会比 modelValue 先获得值
|
|
this.content = JSON.parse(val)
|
|
this.editor && this.editor.setContents(this.content, "user")
|
|
} else if (val === null || val === undefined) {
|
|
// 当 modelValue 传入空时，清空内容
|
|
this.editor && this.editor.setContents('\n', "user")
|
|
}
|
|
},
|
|
content(val) {
|
|
this.$emit('update:modelValue', { subject: 'richInput', payload: { data: val } })
|
|
}
|
|
},
|
|
mounted() {
|
|
/** https://blog.csdn.net/qq_36947168/article/details/119486710 */
|
|
/** https://quilljs.com/docs/modules/toolbar/ */
|
|
const toolbarOptions = [
|
|
[{ 'font': [] }],
|
|
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
|
|
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
|
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
|
|
['blockquote', 'code-block'],
|
|
[{ 'header': 1 }, { 'header': 2 }], // custom button values
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
// [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
|
|
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
|
|
[{ 'direction': 'rtl' }], // text direction
|
|
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
|
[{ 'align': [] }],
|
|
// ['clean'] // remove formatting button
|
|
];
|
|
|
|
this.editor = new Quill(this.$refs['quill-editor'], {
|
|
modules: {
|
|
toolbar: toolbarOptions
|
|
},
|
|
theme: 'snow',
|
|
readOnly: this.ReadOnlyMode,
|
|
placeholder: this.Placeholder,
|
|
scrollingContainer: this.ScrollingContainer
|
|
})
|
|
|
|
this.editor.on('text-change', (delta, oldDelta, source) => {
|
|
this.content = this.editor.getContents()
|
|
// this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
|
|
})
|
|
},
|
|
methods: {
|
|
},
|
|
render: function (h) {
|
|
return h('div', { ref: 'quill-editor', domProps: { id: 'quill-editor' } })
|
|
}
|
|
} |