35 lines
982 B
Vue
35 lines
982 B
Vue
<script setup lang="ts">
|
||
// 通过 ref 调用 getText / getHTML / clear / focus
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3RichText, G3Space } from '@g3soft/ui'
|
||
import type { RichTextExpose } from '@g3soft/ui'
|
||
|
||
const html = ref('<p>富文本<b>正文</b>示例</p>')
|
||
const editorRef = ref<RichTextExpose | null>(null)
|
||
const plainText = ref('')
|
||
|
||
function showPlainText() {
|
||
plainText.value = editorRef.value?.getText() ?? ''
|
||
}
|
||
|
||
function clearContent() {
|
||
editorRef.value?.clear()
|
||
plainText.value = ''
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space vertical :size="12" style="display: flex">
|
||
<G3Space :size="8">
|
||
<G3Button size="small" type="outline" @click="showPlainText">取纯文本</G3Button>
|
||
<G3Button size="small" type="outline" @click="clearContent">清空</G3Button>
|
||
</G3Space>
|
||
|
||
<G3RichText ref="editorRef" v-model="html" />
|
||
|
||
<p v-if="plainText" style="font-size: 13px; color: #666">
|
||
纯文本：{{ plainText }}
|
||
</p>
|
||
</G3Space>
|
||
</template>
|