publish-zsxq-article

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Publish Zsxq Article

发布知识星球文章

Publish Markdown content to Zsxq (知识星球) article editor in Markdown mode, saving as draft for user review before publishing.

将Markdown内容发布到知识星球（Zsxq）文章编辑器的Markdown模式中，保存为草稿供用户审核后再发布。

Prerequisites

前置条件

Browser automation MCP (either one):
- Chrome DevTools MCP (
```
mcp__chrome-devtools__*
```
  )
- Playwright MCP (
```
mcp__playwright__*
```
  )
User logged into Zsxq (知识星球)

浏览器自动化MCP（二选一）：
- Chrome DevTools MCP (
```
mcp__chrome-devtools__*
```
  )
- Playwright MCP (
```
mcp__playwright__*
```
  )
用户已登录知识星球（Zsxq）

Browser MCP Tool Mapping

浏览器MCP工具映射

This skill works with both Chrome DevTools MCP and Playwright MCP. Use whichever is available:

Action	Chrome DevTools MCP	Playwright MCP
Navigate	`navigate_page`	`browser_navigate`
Take snapshot	`take_snapshot`	`browser_snapshot`
Take screenshot	`take_screenshot`	`browser_take_screenshot`
Click element	`click`	`browser_click`
Fill text	`fill`	`browser_type`
Upload file	`upload_file`	`browser_file_upload`
Press key	`press_key`	`browser_press_key`
Evaluate JS	`evaluate_script`	`browser_console_exec`

Detection: Check available tools at runtime. If

mcp__chrome-devtools__navigate_page

exists, use Chrome DevTools MCP. If

mcp__playwright__browser_navigate

exists, use Playwright MCP.

本技能可与Chrome DevTools MCP和Playwright MCP配合使用，使用可用的任意一种即可：

操作	Chrome DevTools MCP	Playwright MCP
导航	`navigate_page`	`browser_navigate`
获取快照	`take_snapshot`	`browser_snapshot`
截取屏幕截图	`take_screenshot`	`browser_take_screenshot`
点击元素	`click`	`browser_click`
填充文本	`fill`	`browser_type`
上传文件	`upload_file`	`browser_file_upload`
按键	`press_key`	`browser_press_key`
执行JS	`evaluate_script`	`browser_console_exec`

检测方式：运行时检查可用工具。若存在

mcp__chrome-devtools__navigate_page

，则使用Chrome DevTools MCP；若存在

mcp__playwright__browser_navigate

，则使用Playwright MCP。

Key URLs

关键URL

Article editor:

https://wx.zsxq.com/article?groupId={groupId}

Default group ID:
```
51111858848454
```
(小木头的AI星球)

登录页面：
```
https://wx.zsxq.com/login
```

文章编辑器：

https://wx.zsxq.com/article?groupId={groupId}

默认群组ID：
```
51111858848454
```
（小木头的AI星球）

Editor Interface

编辑器界面

The Zsxq article editor has two modes:

知识星球文章编辑器有两种模式：

Rich Text Mode (Default)

富文本模式（默认）

Standard WYSIWYG editor with formatting toolbar
Click "切换到 Markdown 模式 (内测)" to switch

带有格式工具栏的标准所见即所得编辑器
点击“切换到 Markdown 模式 (内测)”进行切换

Markdown Mode (Preferred)

Markdown模式（推荐）

Uses Milkdown (ProseMirror-based WYSIWYG Markdown editor)
Renders Markdown as formatted content (headings, bold, links, lists)
Click "切换到富文本模式" to switch back

IMPORTANT: Content Insertion Method The Milkdown editor requires content to be inserted via paste event, NOT direct fill:

```
fill
```
tool → Content treated as plain text, Markdown NOT rendered
Paste event → Milkdown parses Markdown and renders it properly

使用Milkdown（基于ProseMirror的所见即所得Markdown编辑器）
将Markdown渲染为格式化内容（标题、粗体、链接、列表）
点击“切换到富文本模式”切回

重要提示：内容插入方式 Milkdown编辑器要求通过粘贴事件插入内容，而非直接填充：

使用
```
fill
```
工具→内容会被视为纯文本，Markdown不会被渲染
粘贴事件→Milkdown会解析Markdown并正确渲染

Key Elements in Markdown Mode

Markdown模式下的关键元素

Title input: textbox "请在这里输入标题"
Content area: ProseMirror editor (
```
.ProseMirror
```
class)
Save button: "保存" (saves as draft)
Preview button: "预览"
Publish button: "发布" (DO NOT USE - always save as draft)
Tags: "添加标签"

标题输入框：文本框“请在这里输入标题”
内容区域：ProseMirror编辑器（
```
.ProseMirror
```
类）
保存按钮：“保存”（保存为草稿）
预览按钮：“预览”
发布按钮：“发布”（禁止使用 - 始终保存为草稿）
标签：“添加标签”

Main Workflow

主要工作流

Step 1: Prepare Content

步骤1：准备内容

Read the Markdown file and extract:

Title (from H1 header
```
# Title
```
or filename)
Content (full Markdown body)

bash

undefined

读取Markdown文件并提取：

标题（从H1标题
```
# Title
```
或文件名中提取）
内容（完整Markdown正文）

bash

undefined

Read the markdown file

cat /path/to/article.md

undefined

cat /path/to/article.md

undefined

Step 2: Navigate to Article Editor

步骤2：导航到文章编辑器

undefined

undefined

Navigate to the article editor with group ID

navigate_page: https://wx.zsxq.com/article?groupId=51111858848454


If not logged in, the page will redirect to login. Prompt user to log in manually:

请先登录知识星球，登录完成后告诉我。 Login URL: https://wx.zsxq.com/login

undefined

navigate_page: https://wx.zsxq.com/article?groupId=51111858848454


若未登录，页面将重定向到登录页。提示用户手动登录：

请先登录知识星球，登录完成后告诉我。 Login URL: https://wx.zsxq.com/login

undefined

Step 3: Switch to Markdown Mode

步骤3：切换到Markdown模式

After page loads, check if already in Markdown mode by looking for "切换到富文本模式" text.

If in Rich Text mode (shows "切换到 Markdown 模式"):

Click "切换到 Markdown 模式 (内测)"
Confirm the dialog by clicking "确定"

javascript

// Check current mode
const switchBtn = document.querySelector('[class*="switch"]');
if (switchBtn && switchBtn.innerText.includes('切换到 Markdown')) {
  // Need to switch to Markdown mode
}

页面加载完成后，通过查找“切换到富文本模式”文本检查是否已处于Markdown模式。

若处于富文本模式（显示“切换到 Markdown 模式”）：

点击“切换到 Markdown 模式 (内测)”
点击“确定”确认弹窗

javascript

// Check current mode
const switchBtn = document.querySelector('[class*="switch"]');
if (switchBtn && switchBtn.innerText.includes('切换到 Markdown')) {
  // Need to switch to Markdown mode
}

Step 4: Fill Title

步骤4：填充标题

Find the title textbox with placeholder "请在这里输入标题"
Click to focus
Type the title

click: title textbox
fill: title textbox with article title

找到占位符为“请在这里输入标题”的标题输入框
点击获取焦点
输入标题

click: title textbox
fill: title textbox with article title

Step 5: Insert Markdown Content (via Paste Event)

步骤5：插入Markdown内容（通过粘贴事件）

CRITICAL: Do NOT use
fill
tool - it inserts plain text without Markdown rendering.

Instead, use

evaluate_script

to simulate a paste event:

javascript

// Simulate paste event to trigger Milkdown's Markdown parsing
() => {
  const markdownContent = `YOUR_MARKDOWN_CONTENT_HERE`;

  const editorEl = document.querySelector('.ProseMirror');
  if (!editorEl) return { error: 'Editor not found' };

  // Focus the editor
  editorEl.focus();

  // Create and dispatch paste event
  const clipboardData = new DataTransfer();
  clipboardData.setData('text/plain', markdownContent);

  const pasteEvent = new ClipboardEvent('paste', {
    bubbles: true,
    cancelable: true,
    clipboardData: clipboardData
  });

  editorEl.dispatchEvent(pasteEvent);

  return { success: true, charCount: markdownContent.length };
}

This method:

Creates a ClipboardEvent with the Markdown content
Dispatches it to the ProseMirror editor
Milkdown's paste handler parses and renders the Markdown

关键注意事项：请勿使用
fill
工具 - 它会插入纯文本，Markdown不会被渲染。

请改用

evaluate_script

模拟粘贴事件：

javascript

// Simulate paste event to trigger Milkdown's Markdown parsing
() => {
  const markdownContent = `YOUR_MARKDOWN_CONTENT_HERE`;

  const editorEl = document.querySelector('.ProseMirror');
  if (!editorEl) return { error: 'Editor not found' };

  // Focus the editor
  editorEl.focus();

  // Create and dispatch paste event
  const clipboardData = new DataTransfer();
  clipboardData.setData('text/plain', markdownContent);

  const pasteEvent = new ClipboardEvent('paste', {
    bubbles: true,
    cancelable: true,
    clipboardData: clipboardData
  });

  editorEl.dispatchEvent(pasteEvent);

  return { success: true, charCount: markdownContent.length };
}

该方法：

创建包含Markdown内容的ClipboardEvent
将其分发到ProseMirror编辑器
Milkdown的粘贴处理程序会解析并渲染Markdown

Step 6: Add Tags (Optional)

步骤6：添加标签（可选）

Click "添加标签"
Enter tag text
Confirm

点击“添加标签”
输入标签文本
确认

Step 7: Save as Draft

步骤7：保存为草稿

IMPORTANT: Always save as draft, NEVER click "发布" (Publish)

Click "保存" button to save as draft
Verify save was successful

click: "保存" button

重要提示：始终保存为草稿，绝不点击“发布”

点击“保存”按钮保存为草稿
验证保存是否成功

click: "保存" button

Step 8: Verify and Report

步骤8：验证并反馈

After saving:

Check for success message or draft status
Report to user:

草稿已保存。请在知识星球中预览并手动发布。
Draft saved. Please review in Zsxq and publish manually.

保存完成后：

检查是否有成功提示或草稿状态
向用户反馈：

草稿已保存。请在知识星球中预览并手动发布。
Draft saved. Please review in Zsxq and publish manually.

Complete Example Flow

完整示例流程

User: "把 /path/to/my-article.md 发布到知识星球"

1. Read /path/to/my-article.md
   - Extract title from H1 or first line
   - Get full content

2. Navigate to https://wx.zsxq.com/article?groupId=51111858848454

3. Check if logged in
   - If not, prompt user to login

4. Switch to Markdown mode if needed
   - Click "切换到 Markdown 模式 (内测)"
   - Confirm dialog

5. Fill title
   - Click title input
   - Use `fill` tool to set title text

6. Insert content via paste event
   - Use `evaluate_script` to simulate paste event
   - This triggers Milkdown to parse and render Markdown

7. Save as draft
   - Click "保存"

8. Report success
   - "草稿已保存，请手动预览并发布"

用户：“把 /path/to/my-article.md 发布到知识星球”

1. 读取 /path/to/my-article.md
   - 从H1标题或第一行提取标题
   - 获取完整内容

2. 导航到 https://wx.zsxq.com/article?groupId=51111858848454

3. 检查登录状态
   - 若未登录，提示用户登录

4. 若需要则切换到Markdown模式
   - 点击“切换到 Markdown 模式 (内测)”
   - 确认弹窗

5. 填充标题
   - 点击标题输入框
   - 使用`fill`工具设置标题文本

6. 通过粘贴事件插入内容
   - 使用`evaluate_script`模拟粘贴事件
   - 触发Milkdown解析并渲染Markdown

7. 保存为草稿
   - 点击“保存”

8. 反馈成功
   - "草稿已保存，请手动预览并发布"

Critical Rules

关键规则

NEVER click "发布" - Only save as draft using "保存"
Always use Markdown mode - Switch if in Rich Text mode
Check login status - Prompt user to login if needed
Preserve original file - Never modify the source Markdown file
Report completion - Tell user the draft is saved and needs manual review

绝不点击“发布” - 仅使用“保存”按钮保存为草稿
始终使用Markdown模式 - 若处于富文本模式则切换
检查登录状态 - 若需要则提示用户登录
保留原始文件 - 绝不修改源Markdown文件
反馈完成状态 - 告知用户草稿已保存，需手动审核

Troubleshooting

故障排除

Markdown Not Rendering (Shows Raw Syntax)

Markdown未渲染（显示原始语法）

If you see raw Markdown syntax like

**bold**

[link](url)

instead of rendered formatting:

Cause: Content was inserted using
```
fill
```
tool instead of paste event
Solution: Use the
```
evaluate_script
```
method to simulate a paste event (see Step 5)

The Milkdown editor only parses Markdown when content is pasted, not when directly set.

若看到

**bold**

或

[link](url)

等原始Markdown语法而非渲染后的格式：

原因：使用
```
fill
```
工具插入内容而非粘贴事件
解决方案：使用
```
evaluate_script
```
方法模拟粘贴事件（见步骤5）

Milkdown编辑器仅在内容被粘贴时解析Markdown，直接设置内容则不会。

Login Required

需要登录

If page redirects or shows login prompt:

请先登录知识星球: https://wx.zsxq.com/login
登录完成后告诉我。

若页面重定向或显示登录提示：

请先登录知识星球: https://wx.zsxq.com/login
登录完成后告诉我。

Content Too Long

内容过长

Zsxq has a 100,000 character limit. If content exceeds:

文章内容超过100000字符限制，请考虑拆分文章。

知识星球有100,000字符限制。若内容超出：

文章内容超过100000字符限制，请考虑拆分文章。

Switch Mode Dialog

切换模式弹窗

When switching to Markdown mode, a confirmation dialog appears:

Message: "确定要切换编辑器？当前内容将不会同步至新编辑器"
Click "确定" to confirm

切换到Markdown模式时会出现确认弹窗：

提示：“确定要切换编辑器？当前内容将不会同步至新编辑器”
点击“确定”确认

Editor Not Loading

编辑器未加载

If editor elements are not visible:

Wait for page to fully load
Take a new snapshot
If still not loading, refresh the page

若编辑器元素不可见：

等待页面完全加载
获取新的快照
若仍未加载，刷新页面

Element Reference

元素参考

Element	Selector/Identifier	Description
Title input	textbox "请在这里输入标题"	Article title (max 60 chars)
Content area	`.ProseMirror` (Milkdown editor)	Markdown content (max 100000 chars)
Save button	"保存"	Save as draft
Preview button	"预览"	Preview article
Publish button	"发布"	DO NOT USE
Mode switch	"切换到 Markdown 模式" / "切换到富文本模式"	Toggle editor mode
Tags	"添加标签"	Add article tags
Word count	"正文字数：X /100000"	Character counter

元素	选择器/标识符	描述
标题输入框	文本框“请在这里输入标题”	文章标题（最多60字符）
内容区域	`.ProseMirror` (Milkdown编辑器)	Markdown内容（最多100000字符）
保存按钮	“保存”	保存为草稿
预览按钮	“预览”	预览文章
发布按钮	“发布”	禁止使用
模式切换	“切换到 Markdown 模式” / “切换到富文本模式”	切换编辑器模式
标签	“添加标签”	添加文章标签
字数统计	“正文字数：X /100000”	字符计数器

Image Upload

图片上传

Image upload works in both Rich Text mode and Markdown mode using the

upload_file

tool.

使用

upload_file

工具可在富文本模式和Markdown模式下上传图片。

Prerequisites

前置条件

Check image file size first: if > 500KB, compress to WebP or reduce quality
Use
```
ls -la /path/to/image.png
```
to check file size

先检查图片文件大小：若>500KB，压缩为WebP格式或降低画质
使用
```
ls -la /path/to/image.png
```
检查文件大小

Image Upload Workflow

图片上传工作流

Image upload works with the image button in both editor modes:

Take snapshot to find the image button ref/uid
- Rich Text mode:
```
button "image"
```
- Markdown mode:
```
generic description="Add image"
```

Upload image

Chrome DevTools MCP:

upload_file:
  uid: <image button uid>
  filePath: /path/to/image.png

Playwright MCP:

browser_file_upload:
  ref: <image button ref>
  paths: ["/path/to/image.png"]

Verify upload - take screenshot to confirm image appears in editor

在两种编辑器模式下，均可通过图片按钮上传图片：

获取快照找到图片按钮的ref/uid
- 富文本模式：
```
button "image"
```
- Markdown模式：
```
generic description="Add image"
```

上传图片

Chrome DevTools MCP：

upload_file:
  uid: <image button uid>
  filePath: /path/to/image.png

Playwright MCP：

browser_file_upload:
  ref: <image button ref>
  paths: ["/path/to/image.png"]

验证上传 - 截取屏幕截图确认图片已出现在编辑器中

Key Elements for Image Upload

图片上传的关键元素

Mode	Image Button	Selector in Snapshot
Rich Text	button "image"	`button "image"`
Markdown	Add image	`generic description="Add image"`

模式	图片按钮	快照中的选择器
富文本	button "image"	`button "image"`
Markdown	Add image	`generic description="Add image"`

Example Image Upload (Markdown Mode)

示例图片上传（Markdown模式）

undefined

undefined

1. Take verbose snapshot to find image button

1. 获取详细快照找到图片按钮

take_snapshot(verbose=true)

2. Find "Add image" button (e.g., uid=26_59)

2. 找到“Add image”按钮（例如：uid=26_59）

Look for: generic description="Add image"

查找：generic description="Add image"

3. Upload image directly to the button

3. 直接向该按钮上传图片

upload_file: uid: 26_59 # (example uid for "Add image" button) filePath: /Users/user/Downloads/image.png

4. Verify with screenshot

4. 截图验证

take_screenshot

undefined

take_screenshot

undefined

Example Image Upload (Rich Text Mode)

示例图片上传（富文本模式）

undefined

undefined

1. Take snapshot to find image button

1. 获取快照找到图片按钮

take_snapshot

2. Find image button (e.g., uid=12_7)

2. 找到图片按钮（例如：uid=12_7）

Look for: button "image"

查找：button "image"

3. Upload image to the button

3. 向该按钮上传图片

upload_file: uid: 12_7 # (example uid for image button) filePath: /Users/user/Downloads/image.png

4. Verify with screenshot

4. 截图验证

take_screenshot

undefined

take_screenshot

undefined

Image Size Limits

图片大小限制

Maximum recommended: 500KB per image

For larger images, compress first using tools like ImageMagick or sips:

bash

# Check size
ls -la /path/to/image.png

# Compress if needed (macOS)
sips -s format jpeg -s formatOptions 80 /path/to/image.png --out /path/to/image_compressed.jpg

推荐最大值：每张图片500KB

对于较大图片，先使用ImageMagick或sips等工具压缩：

bash

# Check size
ls -la /path/to/image.png

# Compress if needed (macOS)
sips -s format jpeg -s formatOptions 80 /path/to/image.png --out /path/to/image_compressed.jpg

Troubleshooting Image Upload

图片上传故障排除

Image not appearing after upload:

Take a fresh verbose snapshot to get correct uid for image button
Verify the image file exists and is accessible
Check the word count indicator - it should increase after successful upload

Finding the correct button uid:

Use
```
take_snapshot(verbose=true)
```
to see element descriptions
In Markdown mode, look for
```
generic description="Add image"
```
In Rich Text mode, look for
```
button "image"
```

上传后图片未显示：

获取新的详细快照以获取正确的图片按钮uid
验证图片文件存在且可访问
检查字数统计指示器 - 上传成功后字数应增加

找到正确的按钮uid：

使用
```
take_snapshot(verbose=true)
```
查看元素描述
在Markdown模式下，查找
```
generic description="Add image"
```
在富文本模式下，查找
```
button "image"
```

Technical Details

技术细节

The Zsxq article editor uses two different editors:

知识星球文章编辑器使用两种不同的编辑器：

Rich Text Mode (Quill)

富文本模式（Quill）

Quill: A modern WYSIWYG editor
Image upload: Works via
```
upload_file
```
tool to
```
button "image"
```
Toolbar: Standard formatting buttons including image

Quill：现代所见即所得编辑器
图片上传：通过
```
upload_file
```
工具上传至
```
button "image"
```
工具栏：包含图片在内的标准格式按钮

Markdown Mode (Milkdown)

Markdown模式（Milkdown）

Milkdown: A plugin-driven WYSIWYG markdown editor
ProseMirror: The underlying rich-text editing framework
Paste handling: Milkdown intercepts paste events and parses Markdown content

Image upload: Works via

upload_file

tool to

generic description="Add image"

This is why the user's workflow via md.bytenote.net works - pasting from any source triggers Milkdown's Markdown parser, resulting in properly rendered content.

Milkdown：插件驱动的所见即所得Markdown编辑器
ProseMirror：底层富文本编辑框架
粘贴处理：Milkdown拦截粘贴事件并解析Markdown内容

图片上传：通过

upload_file

工具上传至

generic description="Add image"

这就是为什么用户通过md.bytenote.net的工作流可行的原因 - 从任何来源粘贴都会触发Milkdown的Markdown解析器，从而得到正确渲染的内容。