47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<AppPage>
|
|
<div class="h-full flex-col" border="1 solid #ccc" dark:bg-dark>
|
|
<WangToolbar
|
|
border-b="1px solid #ccc"
|
|
:editor="editorRef"
|
|
:default-config="toolbarConfig"
|
|
mode="default"
|
|
/>
|
|
<WangEditor
|
|
v-model="valueHtml"
|
|
style="flex: 1; overflow-y: hidden"
|
|
:default-config="editorConfig"
|
|
mode="default"
|
|
@on-created="handleCreated"
|
|
/>
|
|
</div>
|
|
</AppPage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import '@wangeditor/editor/dist/css/style.css'
|
|
import { Editor as WangEditor, Toolbar as WangToolbar } from '@wangeditor/editor-for-vue'
|
|
|
|
defineOptions({ name: 'RichTextEditor' })
|
|
const editorRef = shallowRef()
|
|
const toolbarConfig = { excludeKeys: 'fullScreen' }
|
|
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
|
|
const valueHtml = ref('')
|
|
|
|
const handleCreated = (editor) => {
|
|
editorRef.value = editor
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html.dark {
|
|
--w-e-textarea-bg-color: #333;
|
|
--w-e-textarea-color: #fff;
|
|
--w-e-toolbar-bg-color: #333;
|
|
--w-e-toolbar-color: #fff;
|
|
--w-e-toolbar-active-bg-color: #666;
|
|
--w-e-toolbar-active-color: #fff;
|
|
/* ...其他... */
|
|
}
|
|
</style>
|