integrated_traffic_vue/src/components/editor/index.vue

<template>
  <div>
    <toolbar :editor="editorRef" :default-config="toolbarConfig" />
    <editor
      v-model="modelValue"
      :style="{ height, 'overflow-y': 'hidden' }"
      @on-created="fnEditorCreated"
    />
  </div>
</template>

<script setup>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import { shallowRef, onBeforeUnmount } from "vue";
import { useVModel } from "@vueuse/core";

defineOptions({
  name: "LayoutEditor",
});
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: "",
  },
  height: {
    type: String,
    default: "300px",
  },
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits);
const editorRef = shallowRef();
const toolbarConfig = {
  excludeKeys: [
    "group-image",
    "group-video",
    "insertLink",
    "codeBlock",
    "emotion",
    "todo",
  ],
};
const fnEditorCreated = (editor) => {
  editorRef.value = editor;
};
onBeforeUnmount(() => {
  editorRef.value && editorRef.value.destroy();
});
</script>

<style scoped></style>