u

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// 列表样式 / 预览 / 打印 / 整理格式 / 源代码
+import { ref } from 'vue'
+import { G3Button, G3RichText, G3Space } from '@g3soft/ui'
+import type { RichTextCleanupResult, RichTextExpose } from '@g3soft/ui'
+
+// 内含一段带空段落的正文，便于演示「整理格式」
+const html = ref(
+  '<h2>季度总结</h2><p>本季度完成如下事项：</p><ul type="square"><li><p>上线 A 模块</p></li><li><p>修复 B 缺陷</p></li></ul><ol type="I"><li><p>需求评审</p></li><li><p>技术方案</p></li></ol><p></p><p></p><p>备注：以上内容见附件。</p>',
+)
+
+const editorRef = ref<RichTextExpose | null>(null)
+const cleanupText = ref('')
+
+/** 整理格式：清理空段落 / 空白文本 / 空行内记号，并把统计显示出来 */
+function tidy() {
+  const result: RichTextCleanupResult | undefined = editorRef.value?.tidyFormat()
+  if (!result) return
+  cleanupText.value = result.changed
+    ? `清理了 ${result.removedEmptyParagraphs} 个空段落、${result.trimmedBlankTexts} 处空白文本、${result.removedEmptyMarks} 个空格式`
+    : '没有需要整理的内容'
+}
+</script>
+
+<template>
+  <G3Space vertical :size="12" style="display: flex">
+    <G3Space :size="8">
+      <G3Button size="small" type="outline" @click="tidy">整理格式（ref）</G3Button>
+      <G3Button size="small" type="outline" @click="editorRef?.openPreview()">预览</G3Button>
+      <G3Button size="small" type="outline" @click="editorRef?.print()">打印</G3Button>
+      <G3Button size="small" type="outline" @click="editorRef?.openSourceCode()">源代码</G3Button>
+    </G3Space>
+
+    <!-- 列表样式在「更多 → 无序列表样式 / 有序列表样式」里选 -->
+    <G3RichText ref="editorRef" v-model="html" :min-height="220" />
+
+    <p v-if="cleanupText" style="font-size: 13px; color: #666">{{ cleanupText }}</p>
+  </G3Space>
+</template>