u

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+// 基础用法：v-model 输出 HTML，工具条内置字体/字号/上下标/表格/撤销重做
+import { ref } from 'vue'
+import { G3RichText } from '@g3soft/ui'
+
+const html = ref('<p>你好，<strong>G3RichText</strong>！</p>')
+</script>
+
+<template>
+  <G3RichText v-model="html" placeholder="请输入正文…" />
+</template>

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>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// readonly 可聚焦可复制但不可编辑；disabled 整体灰化不可交互
+import { ref } from 'vue'
+import { G3RichText, G3Segmented, G3Space } from '@g3soft/ui'
+
+const mode = ref<'normal' | 'readonly' | 'disabled'>('readonly')
+const html = ref('<p>这是一段<strong>只读</strong>的内容，可以选中复制，但不能编辑。</p>')
+
+const options = [
+  { label: '只读', value: 'readonly' },
+  { label: '禁用', value: 'disabled' },
+  { label: '正常', value: 'normal' },
+]
+</script>
+
+<template>
+  <G3Space vertical :size="12" style="display: flex">
+    <G3Segmented v-model="mode" :options="options" />
+
+    <G3RichText
+      v-model="html"
+      :readonly="mode === 'readonly'"
+      :disabled="mode === 'disabled'"
+    />
+  </G3Space>
+</template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// 图片/视频上传：注入 uploadImage / uploadVideo，返回 { fileUrl, ... } 元数据；
+// 上传完成后触发 upload-inline，把内联资源上报给外层（对齐邮件 inline 附件模型）
+import { ref } from 'vue'
+import { G3RichText } from '@g3soft/ui'
+import type { RichTextUploadResult } from '@g3soft/ui'
+
+const html = ref('')
+
+// 演示用假上传：用 FileReader 转 data URL，模拟「上传 → 返回 URL」的完整流程
+function fakeUpload(file: File): Promise<RichTextUploadResult> {
+  return new Promise((resolve) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      resolve({
+        fileUrl: reader.result as string,
+        fileId: `demo-${Date.now()}`,
+        fileName: file.name,
+        fileSize: file.size,
+      })
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+const inlines = ref<RichTextUploadResult[]>([])
+
+function onUploadInline(result: RichTextUploadResult, kind: 'image' | 'video') {
+  inlines.value.push(result)
+}
+</script>
+
+<template>
+  <G3RichText
+    v-model="html"
+    :upload-image="fakeUpload"
+    :upload-video="fakeUpload"
+    placeholder="点击工具条的图片/视频按钮上传…"
+    @upload-inline="onUploadInline"
+  />
+
+  <p v-if="inlines.length" style="font-size: 13px; color: #666; margin-top: 12px">
+    已上传 {{ inlines.length }} 个内联资源：{{ inlines.map((i) => i.fileName).join('、') }}
+  </p>
+</template>