timi-tdesign-mobile/examples/components/EditorShowcase.vue

<template>
	<section class="demo-section">
		<div class="section-heading">
			<div>
				<p class="eyebrow">编辑器基础能力</p>
				<h2>文本、富文本和代码</h2>
				<p>通过同一组公共数据规则验证移动端 TDesign 交互。</p>
			</div>
			<div class="actions">
				<t-button size="small" theme="primary" @click="openSearch">打开搜索</t-button>
				<t-button size="small" variant="outline" @click="submitEditor">提交富文本</t-button>
			</div>
		</div>

		<div class="demo-grid">
			<article class="demo-card wide">
				<div class="card-heading">
					<h3>Tiptap 编辑器</h3>
					<span v-text="editorStatus" />
				</div>
				<div class="editor-box rich-editor">
					<tiptap-editor
						ref="tiptapEditorRef"
						v-model="richContent"
						:upload-image="uploadDemoMedia"
						:upload-video="uploadDemoMedia"
						@change="editorStatus = `内容已更新，${$event.length} 个字符`"
					/>
				</div>
			</article>

			<article class="demo-card wide">
				<div class="card-heading">
					<h3>Tiptap 只读视图</h3>
					<t-input v-model="maxHeight" class="height-input" placeholder="最大高度，如 20rem" />
				</div>
				<tiptap-view :content="richContent" :max-height="maxHeight" />
			</article>

			<article class="demo-card wide">
				<div class="card-heading">
					<h3>代码编辑器</h3>
					<t-button size="small" variant="text" @click="resetCode">恢复示例</t-button>
				</div>
				<div class="editor-box code-editor">
					<code-editor
						ref="codeEditorRef"
						v-model="codeContent"
						language="typescript"
						placeholder="请输入代码"
					/>
				</div>
			</article>
		</div>
	</section>
</template>

<script lang="ts" setup>
import {
	CodeEditor,
	TiptapEditor,
	TiptapView
} from "timi-tdesign-mobile";
import type {
	CodeEditorExpose,
	TiptapEditorExpose
} from "timi-tdesign-mobile";
import { DEMO_ARTICLE_CONTENT, DEMO_CODE, uploadDemoMedia } from "../demo-data";

const richContent = ref(DEMO_ARTICLE_CONTENT);
const codeContent = ref(DEMO_CODE);
const maxHeight = ref("20rem");
const editorStatus = ref("等待编辑");
const tiptapEditorRef = ref<TiptapEditorExpose>();
const codeEditorRef = ref<CodeEditorExpose>();

function openSearch() {
	tiptapEditorRef.value?.openSearch(true);
	codeEditorRef.value?.openSearch(true);
}

async function submitEditor() {
	const value = await tiptapEditorRef.value?.submit();
	if (value !== undefined) {
		editorStatus.value = `已提交，${value.length} 个字符`;
	}
}

function resetCode() {
	codeContent.value = DEMO_CODE;
}
</script>

<style lang="less" scoped>
.demo-section {
	.section-heading {
		align-items: flex-end;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		margin-bottom: 1rem;

		h2 {
			margin: .25rem 0;
		}

		p {
			margin: 0;
			color: var(--td-text-color-secondary);
		}
	}

	.eyebrow {
		font-size: .75rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--td-brand-color);
	}

	.actions,
	.card-heading {
		align-items: center;
		display: flex;
		gap: .5rem;
		justify-content: space-between;
	}

	.demo-grid {
		display: grid;
		gap: 1rem;
	}

	.demo-card {
		min-width: 0;
		padding: 1rem;
		border: 1px solid var(--td-component-border);
		border-radius: .75rem;
		background: var(--td-bg-color-container);
		box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .04);

		h3 {
			margin: 0;
		}

		span {
			font-size: .75rem;
			color: var(--td-text-color-secondary);
		}
	}

	.editor-box {
		width: 100%;
		min-width: 0;
		height: 24rem;
		margin-top: 1rem;
	}

	.rich-editor {
		height: 28rem;
	}

	.height-input {
		width: 9rem;
	}

	@media (max-width: 40rem) {
		.section-heading {
			align-items: stretch;
			flex-direction: column;
		}

		.actions {
			justify-content: flex-start;
		}

		.card-heading {
			align-items: flex-start;
			flex-direction: column;
		}

		.height-input {
			width: 100%;
		}
	}
}
</style>