74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<!-- {{ valueHtml }}-->
|
|
<div style="border: 1px solid #ccc">
|
|
<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>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
import {IEditorConfig, IToolbarConfig} from '@wangeditor/editor'
|
|
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
|
|
import {defineAsyncComponent} from 'vue';
|
|
|
|
const editorRef = shallowRef()
|
|
const mode = ref('default')
|
|
|
|
// 内容 HTML
|
|
const valueHtml = ref('<p></p>')
|
|
|
|
// 模拟 ajax 异步获取内容
|
|
// onMounted(() => {
|
|
// setTimeout(() => {
|
|
// valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
|
|
// }, 1500)
|
|
// })
|
|
|
|
const toolbarConfig:Partial<IToolbarConfig> = { // TS 语法
|
|
// const toolbarConfig = { // JS 语法
|
|
/* 工具栏配置 */
|
|
}
|
|
|
|
|
|
const editorConfig: Partial<IEditorConfig> = { // TS 语法
|
|
// const editorConfig = { // JS 语法
|
|
placeholder:'请输入内容'
|
|
}
|
|
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
server: '/api/upload',
|
|
}
|
|
|
|
const title = ref('')
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value
|
|
if (editor == null) return
|
|
editor.destroy()
|
|
})
|
|
|
|
const handleCreated = (editor: any) => {
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|