如何用OpenClaw实现CSDN文章编辑发布

使用 OpenClaw 实现 CSDN 文章的自动编辑与发布，核心思路是：通过浏览器自动化，模拟人工在 CSDN Markdown 编辑器中的操作，完成从登录、填内容到点击发布的全过程。

以下是具体实现步骤：

---

🛠️ 1. 环境准备

1. 安装与启动 OpenClaw

   确保 OpenClaw 已安装并能正常运行。

   bash

   启动带界面的浏览器，并指定独立配置目录

   openclaw browser --browser-profile openclaw start

2. 手动登录 CSDN

   在弹出的浏览器中，手动完成 CSDN 账号登录。登录状态会保存在 openclaw配置目录中，供后续脚本使用。

---

🔍 2. 关键步骤：分析 CSDN 编辑器

在编写脚本前，需先了解 CSDN 编辑器的特性。

1. 打开编辑器并检测元素

   在已登录的浏览器中访问 https://editor.csdn.net/md，然后执行以下命令，查看页面元素结构：

   bash

   检查是否存在 CodeMirror 等常见编辑器

   openclaw browser --browser-profile openclaw evaluate --fn "() => ({

   hasCodeMirror: !!document.querySelector('.CodeMirror'),

   textareas: document.querySelectorAll('textarea').length,

   hasMonaco: !!document.querySelector('.monaco-editor'),

   hasContentEditable: document.querySelectorAll('[contenteditable=true]').length

   })"

   返回结果通常为：

   json

   {

   "hasCodeMirror": false,

   "textareas": 0,

   "hasMonaco": false,

   "hasContentEditable": 1

   }

   这表明 CSDN 使用的是 contenteditable的可编辑 div，而非传统的 textarea。

2. 测试内容填充

   执行以下脚本，测试向编辑器填充文本是否有效：

   bash

   将 YOUR_CONTENT 替换为一段测试文本

   openclaw browser --browser-profile openclaw evaluate --fn "() => {

   const editables = document.querySelectorAll('[contenteditable=true]');

   if (editables.length > 0) {

   const editor = editables[0];

   editor.focus();

   editor.textContent = 'YOUR_CONTENT';

   editor.dispatchEvent(new Event('input', { bubbles: true }));

   return editor.textContent.length;

   }

   return 0;

   }"

   如果返回了正确的字符数，说明填充方案可行。关键在于：

   • 使用 textContent而非 innerHTML。

   • 填充后必须手动触发 input事件，否则 CSDN 不会识别内容变化。

---

✍️ 3. 内容处理：安全传递长文本

直接在 Shell 脚本中嵌入文章内容会因特殊字符（如引号、换行符）导致语法错误，尤其是长文。

推荐方案：使用 JSON 编码

1. 在 Shell 中处理

   bash

   1. 使用 Python 将文章内容转换为 JSON 字符串

   ARTICLE_JSON=$(cat article.md | python3 -c "import sys, json; print(json.dumps(sys.stdin.read()))")

   2. 将 JSON 字符串存入环境变量供后续使用

   export ARTICLE_CONTENT="$ARTICLE_JSON"

2. 在 JavaScript 中解析

   在 evaluate脚本中，通过 JSON.parse安全地获取原始内容。

   javascript

   const content = JSON.parse(process.env.ARTICLE_CONTENT);

   const editables = document.querySelectorAll('[contenteditable=true]');

   if (editables.length > 0) {

   const editor = editables[0];

   editor.focus();

   editor.textContent = content;

   editor.dispatchEvent(new Event('input', { bubbles: true }));

   return { success: true, length: content.length };

   }

   return { error: 'No contenteditable found' };

---

🚀 4. 完整自动化脚本示例

以下是一个可直接使用的 Bash 脚本，实现了从打开编辑器到点击发布的完整流程。

注意 ：脚本中的元素 refID（如 e3, e5）是示例，请务必根据你自己的 snapshot结果进行替换。

bash

!/bin/bash

publish_csdns.sh

set -e

TITLE="$1"

ARTICLE_PATH="$2"

if [ -z "TITLE"]∣∣[−z"ARTICLE_PATH" ]; then

echo "❌ 用法: $0 "文章标题""/path/to/article.md""

exit 1

fi

if [ ! -f "$ARTICLE_PATH" ]; then

echo "❌ 文章文件不存在: $ARTICLE_PATH"

exit 1

fi

echo "=== CSDN 自动发布 ==="

echo "📝 标题: $TITLE"

echo "📄 文件: $ARTICLE_PATH"

echo ""

1. 启动浏览器

echo "🌐 启动浏览器..."

openclaw browser --browser-profile openclaw start 2>&1 | grep -q "running" || sleep 3

2. 打开编辑器并等待加载

echo "📝 打开 CSDN 编辑器..."

TARGET_ID=$(openclaw browser --browser-profile openclaw open "https://editor.csdn.net/md" 2>&1 | grep targetId | cut -d'"' -f4)

openclaw browser --browser-profile openclaw wait --text "Markdown" --timeout 15000

sleep 2

3. 填写标题

echo "✏️ 填写标题..."

SNAPSHOT=$(openclaw browser --browser-profile openclaw snapshot --compact 2>&1)

TITLE_REF=(echo"SNAPSHOT" | grep "textbox.*标题" | head -1 | grep -oP 'ref=\K\w+' | head -1)

if [ -n "$TITLE_REF" ]; then

openclaw browser --browser-profile openclaw click "$TITLE_REF"

openclaw browser --browser-profile openclaw type "TITLER​EF""TITLE"

echo "✅ 标题已填写"

fi

4. 处理文章内容

echo "📋 处理文章内容..."

ARTICLE_JSON=(cat"ARTICLE_PATH" | python3 -c "import sys, json; print(json.dumps(sys.stdin.read()))")

echo "📝 填充编辑器..."

RESULT=$(openclaw browser --browser-profile openclaw evaluate --fn "() => {

const content = $ARTICLE_JSON;

const editables = document.querySelectorAll('[contenteditable=true]');

if (editables.length > 0) {

const editor = editables[0];

editor.focus();

editor.textContent = content;

editor.dispatchEvent(new Event('input', { bubbles: true }));

return {success: true, length: content.length};

}

return {error: 'No contenteditable found'};

}" 2>&1)

if echo "$RESULT" | grep -q "success"; then

echo "✅ 内容已填充 (${#content} 字符)"

else

echo "❌ 填充失败: $RESULT"

exit 1

fi

sleep 2

5. 点击发布 (两步确认)

echo "🚀 点击发布..."

PUBLISH_REF_1=$(openclaw browser --browser-profile openclaw snapshot --compact | grep "button.*发布文章" | tail -1 | grep -oP 'ref=\K\w+' | head -1)

if [ -n "$PUBLISH_REF_1" ]; then

openclaw browser --browser-profile openclaw click "$PUBLISH_REF_1"

sleep 2

fi

PUBLISH_REF_2=$(openclaw browser --browser-profile openclaw snapshot --compact | grep "button.*发布文章" | tail -1 | grep -oP 'ref=\K\w+' | head -1)

if [ -n "$PUBLISH_REF_2" ]; then

openclaw browser --browser-profile openclaw click "$PUBLISH_REF_2"

sleep 3

fi

6. 结果验证

echo "🔍 验证结果..."

openclaw browser screenshot

echo "✅ 发布流程执行完毕，请检查浏览器窗口和 CSDN 后台。"

使用方法：

1. 将脚本保存为 publish_csdns.sh。

2. 赋予执行权限：chmod +x publish_csdns.sh。

3. 执行命令：./publish_csdns.sh "你的文章标题" "/path/to/your/article.md"。

---

💡 5. 实用技巧与注意事项

• 元素定位 ：使用 openclaw browser snapshot --compact命令获取页面元素的 refID，这是脚本操作的关键。

• 发布确认：CSDN 发布是两步操作（先弹出设置框，再确认发布），脚本中需要模拟两次点击。

• 安全第一：建议先让脚本执行到"保存草稿"或"提交审核"的步骤，人工确认无误后再手动点击最终的"发布"按钮，以防 AI 误操作。

• 遵守规则：控制好发布频率，避免触发平台的风控机制。