字节跳动大手笔：旗下掘金社区Markdown编辑器竟然免费开源啦！

大家好，我是「前端实验室」爱分享的了不起~

今天给推荐一款字节跳动旗下掘金社区官方出品的 Markdown 编辑器 JS 开发库:ByteMD。

为什么会推荐ByteMD呢？一是了不起平常写文章，采用的都是Markdown格式；二是了不起最近的项目中刚好有这个需求，实践体验过了。ByteMD都还不错，我们一起来看看！

关于 ByteMD

ByteMD 是一个用于 web 开发的 Markdown 编辑器 JavaScript 库，是字节跳动旗下掘金社区出品的 Markdown 格式的富文本编辑器。

前端开发者可以基于这个库来将一款漂亮优秀的 Markdown 编辑器集成在自己开发的项目中。

ByteMD 的技术特点

• 轻量级

虽然 ByteMD 是用 Svelte.js 来构建的，但可以编译成普通的 JS DOM 操作，全程不需要导入任何 UI Framework 包，非常轻量，还可以用于其他框架，比如 React、 Vue 和 Angular。

• 扩展性强

ByteMD 内置了基本 Markdown 语法的扩展插件系统，开发者为编辑器添加额外的功能非常简单，比如代码语法高亮显示，数学公式和流程图。如果这些插件还不能满足的需要，我们也可以编写自己的插件。

• 安全的编辑器

ByteMD 已经正确处理了诸如 <script> 和 <img onerror> 等常见的跨网站脚本攻击，不需要引入额外的 DOM 防攻击步骤。

• SSR 兼容

ByteMD 可以在没有额外配置的服务器环境中呈现 SSR。SSR 具有较好的 SEO 性能和较快的传输速度，对需要做 SEO 优化的页面很有帮助。

上手踩坑之旅

认真来说，其实官方文档都说了，只是自己的技术太菜了吧！

不知道大家有没有在掘金社区上发过文章，掘金上内置的 Markdown 编辑器内置了很多好看的主题，写作体验也很棒，界面简洁，没有那些永远用不上的功能。日常使用的文字、图片、公式、流程图、代码、表格、代码高亮等都有。

下载安装在vue里使用

npm install @bytemd/vue -S   
// or
yarn add @bytemd/vue -S

在vue文件里面使用

<template>
  <div>
    <Editor class="editos" :value="value" />
    <Viewer class="viewer" :tabindex="2" :value="value"
    ></Viewer>
  </div>
</template>


<script>
import { Editor, Viewer } from '@bytemd/vue'
export default {
  data () {
    return {
       value: '', // 获取的markdow文档内容
     }
  },
  components: { Editor, Viewer }, // 组件注册
}
</script>

ByteMD 中有两个主要组件：Editor 和 Viewer。

Editor 是 Markdown 编辑器，而 Viewer 就是解析和将 Markdown 文档显示为富文本格式的阅读器。

安装插件

github文档的官网有插件介绍，大家可以安装需求安装，也可以全部安装

避坑必备：第一次用的时候，先不管三七二十一，全都给装上！这样保证你需要的功能都尽可能的囊括了！

配置样式主题

这里是了不起没好好看文档！后面才知道：样式主题就是简简单单引入css文件就好了！

来一个掘金同款~

import 'juejin-markdown-themes/dist/juejin.min.css'

小伙伴们喜欢其他的也可以使用不同风格的！

Markdown主题Github地址：https://github.com/xitu/juejin-markdown-themes

这样一款专业漂亮的 Markdown 就集成好了，非常简单。

注意事项

上面的示例，我是在 VUE2 中实现的。问题不太大！比较费劲的可能就是官方提供的开发文档。它是英文的开发文档，并且很多细节功能没有什么代码例子，遇到问题还是要考验自己解决问题的能力！

网上说，ByteMD在 VUE3 中有些许问题！了不起还没来得及验证过。感兴趣的小伙伴们可以试试哦！附上官方地址，供大家参考！

ByteMD 官网 https://bytemd.js.org/