0

0

如何使用Golang实现一个简易的Web端Markdown编辑器

P粉602998670

P粉602998670

发布时间:2026-02-17 13:49:07

|

171人浏览过

|

来源于php中文网

原创

Visual Studio IntelliCode
Visual Studio IntelliCode

微软VS平台的 AI 辅助开发工具

下载
go只需专注接收markdown、安全转html并返回,前端用轻量编辑器即可;goldmark需配置html.withunsafe()和自定义sanitizer白名单防xss;接口须设json content-type、限流校验,前端防抖调用并直接渲染html。

如何使用golang实现一个简易的web端markdown编辑器

为什么不用现成的前端编辑器(如 CodeMirror、Toast UI)?

因为你要的是「Golang 实现」——重点在后端能力,不是前端渲染。真正需要 Go 做的只有三件事:接收 Markdown 文本、安全转为 HTML、返回给前端。前端编辑器用 textarea 或轻量级库(比如 simplemde)就够了,Go 只管「接、转、吐」。

常见错误是把整个编辑器逻辑塞进 Go:比如想用 Go 渲染实时预览、处理键盘快捷键、做语法高亮……这些该由浏览器完成,Go 做只会卡顿、难调试、跨域麻烦。

  • Go 不该处理 DOM 操作或用户输入事件
  • 所有 HTML 转换必须在服务端完成,不能信前端传来的 __html 字段
  • 若用 blackfriday(已归档),注意它不维护了;推荐 goldmark,默认禁用 XSS,更省心

goldmark 渲染 Markdown 时怎么防 XSS?

goldmark 默认不开 HTML 标签,但如果你允许用户粘贴含 <script></script> 的内容,又没配好选项,照样中招。关键不是“关不关 HTML”,而是「明确声明哪些标签/属性可保留」。

实操建议:

立即学习go语言免费学习笔记(深入)”;

  • goldmark.WithExtensions() 启用基础扩展(表格、脚注等),但别加 goldmark.Extender 自定义危险节点
  • 必须显式配置 html.WithUnsafe() —— 听起来反直觉,但这是「启用 HTML 解析」的开关;没它,<div> 会被原样转义 <li>真正防 XSS 靠 <code>html.WithSanitizer(),传入自定义函数,只放行 <p></p><pre class="brush:php;toolbar:false;">&lt;/code&gt;、&lt;code&gt;&lt;code&gt;&lt;/code&gt;、&lt;code&gt;&lt;strong&gt;&lt;/code&gt; 等白名单标签&lt;/li&gt; &lt;li&gt;别用 &lt;code&gt;bluemonday&lt;/code&gt; 二次过滤——goldmark 自带 sanitizer 更轻、更可控&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;示例关键片段:&lt;/p&gt; &lt;pre class='brush:php;toolbar:false;'&gt;md := goldmark.New( goldmark.WithExtensions(extension.GFM), goldmark.WithRendererOptions( html.WithUnsafe(), // 允许解析原始 HTML html.WithSanitizer(func(tag string, attrs []html.Attribute) bool { allowed := map[string]bool{&quot;p&quot;: true, &quot;code&quot;: true, &quot;pre&quot;: true, &quot;strong&quot;: true, &quot;em&quot;: true} return allowed[tag] }), ), )</pre> <h3>POST 接口接收 Markdown 内容要注意什么?</h3> <p>很多人写 <code>http.HandleFunc("/render", ...),直接读 r.Body,结果中文乱码、换行丢失、超长文本截断——根本原因是没设 Content-Type 和读取方式。

    正确做法:

    • 前端必须发 Content-Type: application/json,字段名统一用 content(别用 markdowntext,易和 Form 表单混淆)
    • Go 后端用 json.NewDecoder(r.Body).Decode(&req),而不是 r.FormValue("content") —— 后者只适用于 application/x-www-form-urlencoded
    • http.MaxBytesReader 限制请求体大小,比如 1MB:http.MaxBytesReader(w, r, 1024*1024),否则恶意大文件会耗尽内存
    • 别在 handler 里做复杂渲染——先校验长度(如 len(req.Content) ),再交给 <code>goldmark 处理

    前端怎么和 Go 渲染接口配合最省事?

    别写一堆 AJAX 状态管理。一个 textarea + 一个 div#preview + 一个防抖提交就够了。

    要点:

    • inputkeyup 事件监听编辑区,但加 300ms 防抖,避免每敲字都发请求
    • 请求用 fetch("/render", { method: "POST", body: JSON.stringify({content: text}) }),别漏 headers: {"Content-Type": "application/json"}
    • 响应直接赋值给 preview.innerHTML —— 因为 goldmark 输出的是安全 HTML,不用再 DOMPurify.sanitize()
    • 如果预览区样式错乱(比如代码块没高亮),说明你漏了 CSS:goldmark 不生成 class,要自己加 <pre class="brush:php;toolbar:false;">&lt;code class=&quot;go&quot;&gt;&lt;/code&gt;,然后靠 &lt;code&gt;highlight.js&lt;/code&gt; 渲染</pre>

    容易被忽略的一点:Go 返回的 JSON 必须是 {"html": "..."} 结构,前端别去拆 response.text() 再手动 parse —— 直接 response.json()html 字段。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
golang如何定义变量
golang如何定义变量

golang定义变量的方法:1、声明变量并赋予初始值“var age int =值”;2、声明变量但不赋初始值“var age int”;3、使用短变量声明“age :=值”等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

207

2024.02.23

golang有哪些数据转换方法
golang有哪些数据转换方法

golang数据转换方法:1、类型转换操作符;2、类型断言;3、字符串和数字之间的转换;4、JSON序列化和反序列化;5、使用标准库进行数据转换;6、使用第三方库进行数据转换;7、自定义数据转换函数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

238

2024.02.23

golang常用库有哪些
golang常用库有哪些

golang常用库有:1、标准库;2、字符串处理库;3、网络库;4、加密库;5、压缩库;6、xml和json解析库;7、日期和时间库;8、数据库操作库;9、文件操作库;10、图像处理库。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

347

2024.02.23

golang和python的区别是什么
golang和python的区别是什么

golang和python的区别是:1、golang是一种编译型语言,而python是一种解释型语言;2、golang天生支持并发编程,而python对并发与并行的支持相对较弱等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

212

2024.03.05

golang是免费的吗
golang是免费的吗

golang是免费的。golang是google开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的开源编程语言,采用bsd开源协议。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

403

2024.05.21

golang结构体相关大全
golang结构体相关大全

本专题整合了golang结构体相关大全,想了解更多内容,请阅读专题下面的文章。

344

2025.06.09

golang相关判断方法
golang相关判断方法

本专题整合了golang相关判断方法,想了解更详细的相关内容,请阅读下面的文章。

197

2025.06.10

golang数组使用方法
golang数组使用方法

本专题整合了golang数组用法,想了解更多的相关内容,请阅读专题下面的文章。

908

2025.06.17

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

283

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Markdown标记语言快速入门
Markdown标记语言快速入门

共30课时 | 3.5万人学习

vscode常用插件与markdown语法介绍
vscode常用插件与markdown语法介绍

共10课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号