Initial commit

app/components/common/Editor.vue

@@ -0,0 +1,64 @@
+<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>