42 lines
971 B
Vue
42 lines
971 B
Vue
|
<template>
|
||
|
|
<div style="flex: 1">
|
||
|
|
<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";
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: "AppEditor",
|
||
|
|
});
|
||
|
|
defineProps({
|
||
|
|
height: { type: String, default: "350px" },
|
||
|
|
});
|
||
|
|
const modelValue = defineModel({ type: String, required: true });
|
||
|
|
const editorRef = shallowRef();
|
||
|
|
const toolbarConfig = {
|
||
|
|
excludeKeys: [
|
||
|
|
"color",
|
||
|
|
"bgColor",
|
||
|
|
"group-image",
|
||
|
|
"group-video",
|
||
|
|
"insertLink",
|
||
|
|
"codeBlock",
|
||
|
|
"emotion",
|
||
|
|
"todo",
|
||
|
|
],
|
||
|
|
};
|
||
|
|
const fnEditorCreated = (editor) => {
|
||
|
|
editorRef.value = editor;
|
||
|
|
};
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
editorRef.value && editorRef.value.destroy();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|