diff --git a/examples/sites/demos/pc/app/rich-text-editor/basic-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/basic-usage.spec.ts
new file mode 100644
index 0000000000..0dc4bca965
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/basic-usage.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#basic-usage')
+
+  const wrap = page.locator('#basic-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+
+  await expect(editor).toBeVisible()
+  await expect(editor).toHaveAttribute('contenteditable', 'true')
+
+  await editor.focus()
+  await expect(editor).toHaveClass('ProseMirror-focused')
+
+  await editor.fill('hello')
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/bubble-menu-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/bubble-menu-usage.spec.ts
new file mode 100644
index 0000000000..978c668e18
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/bubble-menu-usage.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('气泡菜单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#bubble-menu-usage')
+
+  const wrap = page.locator('#bubble-menu-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+
+  await expect(editor).toBeVisible()
+
+  const content = editor.locator('p')
+  await content.selectText()
+  const bubbleMenu = editor.locator('div[data-tippy-root]')
+
+  await expect(bubbleMenu).toBeDefined()
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.spec.ts
new file mode 100644
index 0000000000..122011b4bd
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('协同编辑', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#collaboration-usage')
+
+  const wrap = page.locator('#collaboration-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+
+  await expect(editor).toBeVisible()
+
+  const contents = editor.locator('p')
+  const content = contents.nth(0)
+  content.selectText()
+  const selection = editor.locator('.ProseMirror-yjs-selection')
+  await expect(selection).toBeDefined()
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue
index 4ef98b6c6c..ae8d980350 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/collaboration-usage.vue
@@ -38,4 +38,7 @@ export default {
 .editor-container {
   display: flex;
 }
+.editor-container .tiny-rich-text-editor {
+  max-width: 50%;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.spec.ts
new file mode 100644
index 0000000000..3c7ff5c49b
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/custom-bar-usage.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义工具栏', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#custom-bar-usage')
+
+  const wrap = page.locator('#custom-bar-usage')
+  const toolbarMenu = wrap.locator('.tiny-rich-text-editor > .tiny-toolbar-menu__view')
+  const menuItems = toolbarMenu.locator('.tiny-toolbar-menu__item')
+
+  await expect(toolbarMenu).toBeVisible()
+  await expect(menuItems).toHaveCount(2)
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/event-usage.spec.ts
new file mode 100644
index 0000000000..e0d4200bd2
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#event-usage')
+
+  const wrap = page.locator('#event-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+
+  await expect(editor).toBeVisible()
+
+  editor.focus()
+  editor.blur()
+
+  const logs: string[] = []
+  // 将消息填充到 logs
+  page.on('console', (msg) => logs.push(msg.text()))
+  await expect(logs).toContain('beforeCreate')
+  await expect(logs).toContain('transaction')
+  await expect(logs).toContain('create')
+
+  await expect(logs).toContain('focus')
+  await expect(logs).toContain('blur')
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/options-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/options-usage.spec.ts
new file mode 100644
index 0000000000..65946df7e5
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/options-usage.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#options-usage')
+
+  const wrap = page.locator('#options-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+
+  await expect(editor).toBeVisible()
+  await expect(editor).toHaveAttribute('contenteditable', 'true')
+
+  await expect(editor).toBeFocused()
+  await expect(editor).toHaveClass('ProseMirror-focused')
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.spec.ts
new file mode 100644
index 0000000000..b580cda807
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/placeholder-usage.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('placeholder', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#placeholder-usage')
+
+  const wrap = page.locator('#placeholder-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+  const placeholder = editor.locator('.is-editor-empty.is-empty')
+
+  await expect(placeholder).toBeVisible()
+  await expect(placeholder).toHaveAttribute('data-placeholder', '自定义placeholder')
+})
diff --git a/examples/sites/demos/pc/app/rich-text-editor/slash-menu-usage.spec.ts b/examples/sites/demos/pc/app/rich-text-editor/slash-menu-usage.spec.ts
new file mode 100644
index 0000000000..5e8b3f111f
--- /dev/null
+++ b/examples/sites/demos/pc/app/rich-text-editor/slash-menu-usage.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('斜杠菜单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('rich-text-editor#slash-menu-usage')
+
+  const wrap = page.locator('#slash-menu-usage')
+  const editor = wrap.locator('.tiny-rich-text-editor > .tiny-rich-text-editor__container .ProseMirror')
+
+  await expect(editor).toBeVisible()
+
+  await editor.focus()
+  await editor.fill('/')
+
+  const slashMenu = page.locator('.tiny-slash-menu__view')
+  await expect(slashMenu).toBeDefined()
+})