77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<template>
|
|
<div ref="quillEditor" class="quill-editor"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import Quill from 'quill/core';
|
|
import Toolbar from 'quill/modules/toolbar';
|
|
import Snow from 'quill/themes/snow';
|
|
import Bold from 'quill/formats/bold';
|
|
import Italic from 'quill/formats/italic';
|
|
import Underline from 'quill/formats/underline';
|
|
import List from 'quill/formats/list';
|
|
|
|
Quill.register({
|
|
'modules/toolbar': Toolbar,
|
|
'themes/snow': Snow,
|
|
'formats/bold': Bold,
|
|
'formats/italic': Italic,
|
|
'formats/underline': Underline,
|
|
'formats/list': List
|
|
});
|
|
|
|
export default {
|
|
name: 'QuillEditor',
|
|
props: {
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: 'Compose an epic...'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
editor: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.editor = new Quill(this.$refs.quillEditor, {
|
|
theme: 'snow',
|
|
placeholder: this.placeholder,
|
|
modules: {
|
|
toolbar: [
|
|
[{ 'header': [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['link', 'image'],
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
[{ 'align': [] }],
|
|
[{ 'color': [] }, { 'background': [] }],
|
|
['clean']
|
|
]
|
|
}
|
|
});
|
|
|
|
this.editor.on('text-change', () => {
|
|
this.$emit('update:content', this.editor.root.innerHTML);
|
|
});
|
|
|
|
this.editor.root.innerHTML = this.content;
|
|
},
|
|
beforeUnmount() {
|
|
if (this.editor) {
|
|
this.editor.off('text-change');
|
|
this.editor = null;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quill-editor {
|
|
min-height: 200px;
|
|
}
|
|
</style>
|