forked from integrated_whb/integrated_whb_vue
54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<Toolbar :editor="editorRef" :default-config="toolbarConfig" />
|
||
|
|
<Editor
|
||
|
|
:style="{ height, 'overflow-y': 'hidden' }"
|
||
|
|
v-model="modelValue"
|
||
|
|
@onCreated="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>
|