109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
import { reactive, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue'
|
||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||
import ToolDetail from '@/components/Layout/ToolDetail/ToolDetail.vue'
|
||
import '@wangeditor/editor/dist/css/style.css' // 引入富文本 css
|
||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' //富文本组件
|
||
import { copy } from '@/utils/string'
|
||
const info = reactive({
|
||
title: "在线文本编辑/HTML获取",
|
||
mode: 'default',
|
||
})
|
||
// 编辑器实例，必须用 shallowRef
|
||
const editorRef = shallowRef()
|
||
|
||
// 内容
|
||
const content = ref(``)
|
||
// html
|
||
const html = ref('')
|
||
|
||
// 工具栏配置
|
||
const toolbarConfig = {
|
||
excludeKeys: [
|
||
"uploadImage",
|
||
"group-video",
|
||
"insertLink",
|
||
]
|
||
}
|
||
|
||
//编辑器配置
|
||
const editorConfig = { placeholder: '请输入内容...' }
|
||
|
||
const handleCreated = (editor) => {
|
||
editorRef.value = editor // 记录 editor 实例，重要！
|
||
// html = editor.getHtml()
|
||
}
|
||
|
||
const handleChange = (editor) => {
|
||
html.value = editor.getHtml()
|
||
}
|
||
|
||
|
||
// 组件销毁时，也及时销毁编辑器
|
||
onBeforeUnmount(() => {
|
||
const editor = editorRef.value
|
||
if (editor == null) return
|
||
editor.destroy()
|
||
})
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
|
||
//copy
|
||
const copyRes = async (resStr: string) => {
|
||
copy(resStr)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col mt-3 flex-1">
|
||
<DetailHeader :title="info.title"></DetailHeader>
|
||
|
||
<div class="p-4 rounded-2xl bg-white h-[510px]">
|
||
<div class="border z-10 mt-3 h-96">
|
||
<Toolbar
|
||
class=""
|
||
:editor="editorRef"
|
||
:defaultConfig="toolbarConfig"
|
||
:mode="info.mode"
|
||
/>
|
||
<Editor
|
||
class="border"
|
||
v-model="content"
|
||
:defaultConfig="editorConfig"
|
||
:mode="info.mode"
|
||
@onCreated="handleCreated"
|
||
@onChange="handleChange"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="p-4 mt-3 rounded-2xl bg-white">
|
||
<el-button type="primary" @click="copyRes(html)">复制HTML</el-button>
|
||
<el-input
|
||
v-model="html"
|
||
disabled
|
||
class="mt-3"
|
||
type="textarea"
|
||
autosize
|
||
placeholder="html预览处"
|
||
/>
|
||
</div>
|
||
|
||
<!-- desc -->
|
||
<ToolDetail title="描述">
|
||
<el-text>
|
||
在线富文本编辑, html实时预览，在线编辑文本，文本编辑获取html
|
||
</el-text>
|
||
</ToolDetail>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.downext-select{
|
||
@apply w-24
|
||
}
|
||
</style> |