# 从 SimpleMDE 到 Vditor ## 关于前端 Markdown 编辑器 > SimpleMDE [链接](https://simplemde.com/) > > Vditor [链接](https://b3log.org/vditor/) ## 一、编辑 ### SimpleMDE - 引入 ```html ``` - 初始化 > 用于 `textarea` 标签，例如 `` ```js var simplemde = new SimpleMDE({ autofocus: false, element: document.getElementById("test"), hideIcons: ["heading"], indentWithTabs: false, renderingConfig: { codeSyntaxHighlighting: true, singleLineBreaks: true, }, tabSize: 4, showIcons: ["heading-smaller", "heading-bigger"], spellChecker: false, status: false, }); simplemde.value(content); // 设置 SimpleMDE 编辑器初始值 ``` ### Vditor - 引入 ```html ``` - 初始化 > 用于 `div` 标签，例如 `

` ```js const vditor = new Vditor("test", { minHeight: 240, lang: "zh_CN", toolbarConfig: { pin: true, }, counter: { enable: true, }, value: "", }); ``` ## 二、渲染 ### SimpleMDE > 使用 [Marked.js](https://marked.js.org/) 渲染 - 引入 ```js ``` - 渲染 Markdown ```html

``` - 渲染 Markdown ```html

```

游客

从 SimpleMDE 到 Vditor —— 关于前端 Markdown 编辑器