36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<ClientOnly>
|
|
<QuillEditor v-model:content="content" content-type="html" theme="snow" :toolbar="toolbarOptions" @text-change="textChange"
|
|
style="font-size: 16px; height: 450px;" />
|
|
</ClientOnly>
|
|
</template>
|
|
<script setup>
|
|
import { QuillEditor } from '@vueup/vue-quill'
|
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'
|
|
const emit = defineEmits(['content', 'modalevent'])
|
|
var props = defineProps({
|
|
text: String,
|
|
row: Object,
|
|
pagename: String,
|
|
api: String
|
|
})
|
|
// Custom toolbar options
|
|
const toolbarOptions = [
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
['blockquote', 'code-block'],
|
|
[{ header: 1 }, { header: 2 }],
|
|
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
[{ script: 'sub' }, { script: 'super' }],
|
|
[{ indent: '-1' }, { indent: '+1' }],
|
|
[{ color: [] }, { background: [] }],
|
|
[{ align: [] }],
|
|
['clean'],
|
|
['link', 'image', 'video']
|
|
]
|
|
var content = props.text
|
|
function textChange() {
|
|
emit('content', content)
|
|
emit('modalevent', {name: 'content', data: content})
|
|
}
|
|
</script> |