40 lines
1.9 KiB
Vue
40 lines
1.9 KiB
Vue
<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>
|