64 lines
1.2 KiB
Vue
64 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>
|