菜鸟的markdown编辑器集成-白红宇

菜鸟的markdown编辑器集成

阅读量：748 次

发布时间：2019-03-22

本文共 1490 字，大约阅读时间需要 4 分钟。

#菜鸟的Markdown编辑器集成

廿天来，我一直在寻找一款适合我使用的Markdown编辑器。经过一番调研，我找到一款非常不错的开源Markdown编辑器，这篇文章将记录我的学习和使用心得。

说明与下载

下载与安装

对于什么是Markdown编辑器以及其语法，这里就不做详细介绍了。我们直接来看如何下载和安装这款编辑器。

下载包

下载包通常包括一个开源的代码仓库。这需要将它加入到你的项目中，这样你就可以体验这款优秀的编辑器了。下载时注意选择正确的版本，如果是Windows系统，可以选择对应的安装包。

使用说明

这款Markdown编辑器具有友好的界面和强大的功能。新手也能快速上手。以下是主要使用方法：

Basic Usage

打开Markdown编辑器，创建一个新文档。你可以直接在编辑器中输入Markdown语法，或者选择从文件加载现有的文档。

代码示例

这里展示一个简单的代码示例：

    Markdown Editor

Markdown编辑器支持多种语法特性。在线示例和更多功能可以在官方文档中找到。

案例集成

为了更好地理解这款编辑器，我决定将它集成到一个小项目中。我生成了一个简单的博客系统，分为两个页面：编辑页面和博客详情页面。以下是关键步骤：

项目结构

创建一个/static/lib/editormd文件夹，将编辑器的JavaScript和样式文件放入该目录。在你的页面模板中引入相应的资源，可通过如下方式实现：

前端与后端集成

在前端部分，最重要的是初始化编辑器。以下是一个简单的代码示例如下：

$(document).ready(function() {    var editor = editormd('editor', {        // 参数配置        width: '100%',        height: '400px',        syncScrolling: 'single'    });});

在后端部分，我们需要处理Markdown格式的转换和保存。推荐使用CommonMark库，可以通过如下方式进行转换：

public static String markdownToHtml(String markdown) {    Parser parser = Parser.builder().build();    Node document = parser.parse(markdown);    HtmlRenderer renderer = HtmlRenderer.builder().build();    return renderer.render(document);}