65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<template>
|
|
<ClientOnly>
|
|
<QuillEditor
|
|
v-model:content="content"
|
|
content-type="html"
|
|
theme="snow"
|
|
:toolbar="toolbarOptions"
|
|
@text-change="textChange"
|
|
:style="`font-size: 16px; height: ${props.height};`"
|
|
/>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { QuillEditor } from "@vueup/vue-quill";
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|
|
|
const emit = defineEmits(["content", "modalevent"]);
|
|
|
|
const props = defineProps({
|
|
text: String,
|
|
row: Object,
|
|
pagename: String,
|
|
api: String,
|
|
height: {
|
|
type: String,
|
|
default: "450px",
|
|
},
|
|
});
|
|
|
|
// Custom toolbar options
|
|
const toolbarOptions = [
|
|
// 🔤 Font chữ
|
|
[{ font: [] }],
|
|
|
|
// 🔠 Cỡ chữ
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
|
|
// ✍️ Định dạng cơ bản
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
|
|
// 🎨 Màu chữ & nền
|
|
[{ color: [] }, { background: [] }],
|
|
|
|
// 📐 Căn lề
|
|
[{ align: [] }],
|
|
|
|
// 📋 Danh sách
|
|
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
|
|
// 🔗 Media
|
|
['link', 'image', 'video'],
|
|
|
|
['clean'], // Xóa định dạng
|
|
]
|
|
|
|
|
|
var content = props.text;
|
|
|
|
function textChange() {
|
|
emit("content", content);
|
|
emit("modalevent", { name: "content", data: content });
|
|
}
|
|
</script>
|