不想用第三方在线编辑器?我用Vue3手搓了一个公众号专属Markdown

👩‍💻我是爱折腾的一名程序媛，喜欢研究全栈开发的各种实践，热爱分享踩坑后的收获与思考，也享受用代码写出各种实用小工具解决问题的快乐。

如果你也在技术这条路上向前走，关注我，愿我们能彼此陪伴，一起成为更好的自己 🌱

Markdown输入 → 解析成HTML → 把所有样式转成行内 → 复制到剪贴板

/** 获取当前光标位置和选中文本 */

functiongetTextareaSelection() {

const el = textareaRef.value;

if (!el) return { start: 0, end: 0, selected: “” };

return {

start: el.selectionStart,

end: el.selectionEnd,

selected: el.value.substring(el.selectionStart, el.selectionEnd),

scrollTop: el.scrollTop,

    };

}

/** 替换选中文本（或插入新文本），并恢复光标 */

functioninsertMarkdown(

    wrapper,

    placeholder = “文本”,

    cursorOffset = null,

) {

//…

const { start, end, selected, scrollTop } = getTextareaSelection();

const before = rawMarkdown.value.substring(0, start);

const after = rawMarkdown.value.substring(end);

let replacement, newCursorPos;

if (wrapper.includes(“$1”)) {

// 支持占位符 $1（用于包裹类：加粗、斜体等）

const content = selected || placeholder;

        replacement = wrapper.replace(“$1”, content);

        newCursorPos = start + replacement.length;

    } else {

// 直接插入（标题前缀、列表、分割线等）

        replacement = wrapper;

        newCursorPos = start + replacement.length;

    }

    rawMarkdown.value = before + replacement + after;

nextTick(() => {

        el.focus();

// 如果有选中文本被包裹，光标放在替换内容末尾

        el.selectionStart = el.selectionEnd = newCursorPos;

// 强制恢复滚动条位置

        el.scrollTop = scrollTop;

    });

}

case“codeBlock”:

const lang = language || “python”;

if (selected) {

// 有选中文本：包裹在代码块中，光标停在选中文本末尾

insertMarkdown(`\n\`\`\`${lang}\n$1\n\`\`\`\n`, “”);

    } else {

// 无选中文本：插入空代码块，光标自动定位到中间，方便直接粘贴

const cursorOffset = 5 + lang.length; // 即 \n“`python\n 之后的那个空行位置

insertMarkdown(

`\n\`\`\`${lang}\n\n\`\`\`\n`,

“”,

            cursorOffset,

        );

    }

break;

constBULLETS = [‘✨  ‘, ‘▸  ‘, ‘◦  ‘, ‘▪  ‘]

functiondecorateUl(ulElement, depth = 0) {

const bullet = BULLETS[depth] || BULLETS.at(-1)

  ulElement.style.listStyleType = ‘none’

const directLis = Array.from(ulElement.children).filter(c => c.tagName === ‘LI’)

  directLis.forEach(li => {

    li.style.paddingLeft = ‘1.6em’

    li.style.position = ‘relative’

const marker = document.createElement(‘span’)

    marker.textContent = bullet

    marker.style.cssText = `position:absolute;left:0;top:0;`

    li.insertBefore(marker, li.firstChild)

// 递归处理嵌套列表

    li.querySelectorAll(‘:scope > ul’).forEach(ul =>decorateUl(ul, depth+1))

  })

}

div.querySelectorAll(“pre”).forEach((pre) => {

// 创建替换元素

const section = document.createElement(“section”);

    section.style.cssText = WECHAT_TAG_STYLES.pre; // 重点：overflow-x: auto;

// 处理每行为一个 p 标签，以保留换行

const code = pre.innerHTML;

const lines = code.split(“\n”);

    lines.forEach((line) => {

const p = document.createElement(“p”);

        p.style.cssText = WECHAT_TAG_STYLES.prep; // 重点：white-space: nowrap;

// 空格转实体以保留缩进，注意保留span标签属性定义内的空格：<span style=”xxx”>        

        line = line.replace(/ (?![^<>]*>)/g, “\u00A0”);  // 空格转实体

        p.innerHTML = line;

        section.appendChild(p);

    });

    pre.replaceWith(section);

})

constWECHAT_TAG_STYLES = {

pre: “overflow-x:auto;padding:14px 16px;font-size:13px;line-height:1.5;margin: 0.8em 0;border-radius:6px;border:1px solid #e8e8e8;”,

prep: ‘white-space:nowrap;font-family:”JetBrains Mono NL”, Consolas, monospace; font-size: 14px; line-height: 1.3;text-align:left;’,

    }