75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<template>
|
|
<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.trim="valueHtml" :defaultConfig="editorConfig" :mode="mode"
|
|
@onCreated="handleCreated" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
// 编辑器实例，必须用 shallowRef
|
|
const editorRef = shallowRef()
|
|
|
|
// 内容 HTML
|
|
const valueHtml = ref()
|
|
|
|
// 模拟 ajax 异步获取内容
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
valueHtml.value = ''
|
|
}, 1500)
|
|
})
|
|
|
|
const toolbarConfig = {
|
|
excludeKeys: [//隐藏的toolbarKey,默认为空
|
|
// "group-more-style",
|
|
'group-video',//视频控件
|
|
// 'redo',
|
|
// 'undo',
|
|
// 'group-image',
|
|
]
|
|
}
|
|
const editorConfig = {
|
|
placeholder: '请输入内容...',
|
|
readOnly:false
|
|
|
|
}
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value
|
|
if (editor == null) return
|
|
editor.destroy()
|
|
})
|
|
|
|
const handleCreated = (editor: any) => {
|
|
editorRef.value = editor // 记录 editor 实例，重要！
|
|
}
|
|
|
|
const getHtmlByFather =()=>{//获取html
|
|
return editorRef.value.getHtml()
|
|
}
|
|
|
|
const setHtmlByFather =(val:any)=>{
|
|
editorRef.value.setHtml(val)
|
|
}
|
|
|
|
|
|
const editorIsEmpty =()=>{
|
|
return editorRef.value.isEmpty()
|
|
}
|
|
const editorClear =()=>{
|
|
return editorRef.value.clear()
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
getHtmlByFather,
|
|
setHtmlByFather,
|
|
editorIsEmpty,
|
|
editorClear
|
|
})
|
|
|
|
</script> |