changes

components/common/Editor.vue

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