专栏首页飞天小牛肉Echo 是如何支持 MarkDown 的

Echo 是如何支持 MarkDown 的

这个点其实没啥技术含量,就是集成一下开源的 MarkDown 编辑器,按照说明按部就班地走就行了。

这里我选的 MarkDown 编辑器是 Editor.md。大家可能会碰壁的地方应该就是图片上传的部分。

第一步:下载 Editor.md 源码

Editor.md 源码下载地址:https://pandao.github.io/editor.md/index.html

下载解压之后将文件夹整个放入 static 目录下:

做完这一步各位的第一想法应该就是要去配置下我们的拦截器(对除静态资源外所有路径进行拦截),不要拦截 editor-md 这个文件夹下的所有资源。

另外,editor.md 自带的 examples 文件夹下的 example.html 文件就是一个示例界面,我们直接将其拷贝到 templates/site 目录下,并重命名为 discuss-publish.html,作为我们的发帖界面。然后将里面所有的静态资源引用都改成这些引用的绝对路径,比如:

第二步:修改 discuss-publish.html 代码

下面贴一下核心的前端代码:

MarkDown 文本的渲染区域就是 textarea 标签包裹的那个区域

下图中框出来的地方填的就是包裹 textarea 的 div 的 id:

另外,需要注意的是 path 路径的配置(lib 文件夹的路径)以及 imageUploadURL(后端上传图片的方法地址),这个在上图中都用黄线标注出来了。

第三步:编写后端上传图片代码

关于上传图片这里,我就没有做图床服务器这种了,直接把图片上传到本地了

编写后端之前首先要做的就是与前端协调好接口格式,那 editor.md 官方说期望我们上传图片的服务返回如下 JSON 格式:

{
    success : 0 | 1, // 0 表示上传失败; 1 表示上传成功
    message : "提示的信息",
    url     : "图片地址" //上传成功时才返回
}

另外,editor.md 中选择图片的控件 id 默认是 editormd-image-file

下面这段上传图片的代码在 DiscussPostController.java 中:

图片上传路径 editormdUploadPath 定义在配置文件中(这里如果各位小伙伴需要将项目部署到服务器上,需要将本地路径修改为线上路径):

图片上传四步走:

  • ① 获取上传文件的名称
  • ② 生成图片存储路径
  • ③ 保存图片到存储路径
  • ④ 生成图片访问地址

第四步:配置虚拟路径映射访问

不知道各位会不会遇到这样的问题,这主要是 IDEA 对服务器的保护措施导致的:SpringBoot 中上传图片到当前目录下,不能立即显示,需要重启服务器才会显示上传的图片。服务器不能对外部暴露真实的资源路径,需要配置虚拟路径映射访问

在我们的 WebMvcConfig.java 中添加如下方法,对图片上传的文件夹 editor-md-upload 配置虚拟路径映射访问:

第五步:解决跨域问题

上述步骤做完后,可能会遇到报错跨域问题,需要在 Security 配置中增加一行配置:

http.headers().frameOptions().sameOrigin();

第六步:配置 MarkDown 渲染

至此,我们做完了写 MarkDown 的工作,接下来做的就是将 MarkDown 渲染成 Html 显示在页面上。

我们需要在帖子详情页 dicuss-detail.html 中做一些修改。

引入 editor.md 的 css 和必要的 js 文件:

可以看见,上面配置了一些 MarkDown 渲染规则,图中标注出来的 md-content 就表示要渲染的区域,即包裹帖子内容的 div 的 id:

本文分享自微信公众号 - 飞天小牛肉(CS-Wiki),作者:飞天小牛肉

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jedis是如何支持Cluster的

    前面说了 Jedis(2.9.0) 如何支持 Redis Sentinel 的,今天看看 Jedis 是如何支持 Redis Cluster 的。

    Bug开发工程师
  • WordPress用插件实现MarkDown语法支持

    WordPress默认不支持MarkDown标记(不知道最新版实现没有),虽然提供了很多第三方MarkDown插件,但都无法达到满意的效果。一直以来都是用HTM...

    砸漏
  • Echo 的评论是如何显示的

    关于评论模块需要注意的就是评论表 comment 的设计,这个表应该是相对来说最复杂的一张了。因为不仅有评论(对帖子的评论),还有对评论的回复,都放在这一张表里...

    飞天小牛肉
  • 多重图片优化Cli工具 | Android跨界py之旅

    .markdown-body{color:#595959;font-size:15px;font-family:-apple-system,system-ui,...

    逮虾户
  • Java中的 Switch 是如何支持 String 的?为什么不支持 long?

    我们知道 Java Switch 支持byte、short、int 类型,在 JDK 1.5 时,支持了枚举类型,在 JDK 1.7 时,又支持了 String...

    好好学java
  • 别人的电子书,你的电子书,都在bookdown

    bookdown是著名R包作者谢益辉开发的,支持采用Rmarkdown (R代码可以运行)或普通markdown编写文档,然后编译成HTML, WORD, PD...

    生信宝典
  • Echo的数据库表是如何设计的

    这个表应该是相对来说最复杂的一张了。因为不仅有评论(对帖子的评论),还有对评论的回复,都放在这一张表里面了。

    飞天小牛肉
  • Bookdown文档生成教程

    bookdown是一款及其方便的编写技术文档或教材的工具,语法简洁,数据处理灵活。支持Rmarkdown或普通markdown通过pandoc软件转换为HTML...

    生信宝典
  • gitbook 入门教程之前置知识 原

    markdown 是一种简化的 html 语法,相比于 txt 无格式文本更强大.

    雪之梦技术驿站
  • 关于文章与评论区的Markdown语法规则(五分钟学完)

    markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。 优点: 1、因为是纯文本,所以只要支持markdown的地...

    HUBU生信
  • markdown基本语法

    markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

    余生
  • 什么是事务?MySQL如何支持事务?

    事务是由一步或几步数据库操作序列组成逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行。程序和事务是两个不同的概念。一般而言:一段程序中可能包含多个事务。(...

    陈不成i
  • 写作工具的取经之路

    写公众号写了一年,穿插着写了一本书,在工具的使用上,也渐渐有了些心得,不敢独专,跟大家分享一下。 最早我使用的是reST [1] ,使用sphinx [2] 来...

    tyrchen
  • Tensorflow框架是如何支持分布式训练的?

    大数据时代的互联网应用产生了大量的数据,这些数据就好比是石油,里面蕴含了大量知识等待被挖掘。深度学习就是挖掘数据中隐藏知识的利器,在许多领域都取得了非常成功的应...

    AI科技大本营
  • jfinal-weixin是如何支持多公众号配置的

    spring-boot-starter-weixin是jfinal-weixin的spring boot版本,以前一直在用jfinal-weixin做为开发工具...

    Java旅途
  • 发送钉钉消息 Shell 脚本

    由于跑批任务大概在凌晨 2:15 分左右完成,故设置 2:20 开始检测,每 30 分钟(可调整)钉钉告警一次未获取到,之后一直检测,直到检测到文件生成。

    叨叨软件测试
  • Laravel5框架安装Markdown编辑器

    composer require chenhua/laravel5-markdown-editor

    gaobinzhan
  • teg markdown语法

    Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

    葫芦
  • markdown 快速入门 原

    markdown 不止是 HTML 的简化版,更重要的是 txt 的升级版,word 的轻量版,是笔记的最佳载体.

    雪之梦技术驿站

扫码关注云+社区

领取腾讯云代金券