37 lines
962 B
Vue
37 lines
962 B
Vue
<script lang="ts" setup>
|
|
import { QuillEditor } from "@vueup/vue-quill";
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|
|
|
const props = defineProps({ text: String });
|
|
const emit = defineEmits(["content"]);
|
|
|
|
const toolbarOptions = [
|
|
[{ font: [] }],
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
|
["bold", "italic", "underline", "strike"], // Định dạng cơ bản
|
|
["blockquote", "code-block"],
|
|
[{ color: [] }, { background: [] }], // Màu chữ & nền
|
|
[{ align: [] }], // Căn lề
|
|
[{ list: "ordered" }, { list: "bullet" }],
|
|
["link", "image", "video"], // Media
|
|
["clean"], // Xóa định dạng
|
|
];
|
|
|
|
const content = ref(props.text);
|
|
|
|
function textChange() {
|
|
console.log("content", content.value);
|
|
emit("content", content.value);
|
|
}
|
|
</script>
|
|
<template>
|
|
<QuillEditor
|
|
v-model:content="content"
|
|
:toolbar="toolbarOptions"
|
|
@textChange="textChange"
|
|
content-type="html"
|
|
theme="snow"
|
|
style="height: 400px"
|
|
/>
|
|
</template>
|