mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
|
||
|
||
defineOptions({
|
||
name: "Editor"
|
||
});
|
||
|
||
const mode = "default";
|
||
// 编辑器实例，必须用 shallowRef
|
||
const editorRef = shallowRef();
|
||
|
||
// 内容 HTML
|
||
const valueHtml = ref("<p>hello</p>");
|
||
|
||
// 模拟 ajax 异步获取内容
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
|
||
}, 1500);
|
||
});
|
||
|
||
const toolbarConfig: any = { excludeKeys: "fullScreen" };
|
||
const editorConfig = { placeholder: "请输入内容..." };
|
||
|
||
// 组件销毁时，也及时销毁编辑器
|
||
onBeforeUnmount(() => {
|
||
const editor = editorRef.value;
|
||
if (editor == null) return;
|
||
editor.destroy();
|
||
});
|
||
|
||
const handleCreated = editor => {
|
||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<el-card>
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">
|
||
编辑器组件，采用开源的
|
||
<el-link
|
||
href="https://www.wangeditor.com"
|
||
target="_blank"
|
||
:icon="useRenderIcon('edit')"
|
||
style="font-size: 16px; margin: 0 4px 5px"
|
||
>
|
||
Wangeditor
|
||
</el-link>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
<div class="wangeditor">
|
||
<Toolbar
|
||
style="border-bottom: 1px solid #ccc"
|
||
:editor="editorRef"
|
||
:defaultConfig="toolbarConfig"
|
||
:mode="mode"
|
||
/>
|
||
<Editor
|
||
style="height: 500px; overflow-y: hidden"
|
||
v-model="valueHtml"
|
||
:defaultConfig="editorConfig"
|
||
:mode="mode"
|
||
@onCreated="handleCreated"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</template>
|