u

code/g3soft-libs/docs/examples/rich-text/methods.vue

@@ -0,0 +1,34 @@
+<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>