Jiny pristup k vytvareni letu, polofunkcni editace letu

2023-06-27 22:45:24 +02:00
parent 4d9950e362
commit d399e1aaf1
20 changed files with 672 additions and 261 deletions
@@ -0,0 +1,60 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: false
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "60vh"
+  },
+  label: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+})
+
+const emit = defineEmits(["update:modelValue"]);
+
+const content = ref("");
+onMounted(() => {
+  content.value = props.modelValue;
+})
+
+watch(content, () => emit("update:modelValue", content.value));
+
+const definitions = {
+  left: {icon: "format_align_left"},
+  center: {icon: "format_align_center"},
+  right: {icon: "format_align_right"},
+  justify: {icon: "format_align_justify"},
+  bold: {icon: 'format_bold'},
+  italic: {icon: 'format_italic'},
+  strike: {icon: 'strikethrough_s'},
+  underline: {icon: 'format_underline'},
+  unordered: {icon: 'format_list_bulleted'},
+  ordered: {icon: 'format_list_numbered'},
+  undo: {icon: 'undo'},
+  redo: {icon: 'redo'},
+}
+
+const toolbar = [
+  ["bold", "italic", "strike"],
+  ["left", "center", "justify", "right"],
+  ['unordered', 'ordered'],
+  ["undo", "redo"]
+]
+</script>
+
+<template>
+  <q-editor v-model="content" :definitions="definitions" :toolbar="toolbar" :height="height" :label="label" :rules="rules"/>
+</template>