大家好,我是「前端实验室」
爱分享的了不起~
今天给推荐一款字节跳动旗下掘金社区官方出品的 Markdown 编辑器 JS 开发库:ByteMD
。
为什么会推荐ByteMD
呢?一是了不起平常写文章,采用的都是Markdown格式;二是了不起最近的项目中刚好有这个需求,实践体验过了。ByteMD
都还不错,我们一起来看看!
ByteMD
是一个用于 web 开发的 Markdown 编辑器 JavaScript 库,是字节跳动旗下掘金社区出品的 Markdown 格式的富文本编辑器。
前端开发者可以基于这个库来将一款漂亮优秀的 Markdown 编辑器集成在自己开发的项目中。
虽然 ByteMD
是用 Svelte.js
来构建的,但可以编译成普通的 JS DOM 操作,全程不需要导入任何 UI Framework 包,非常轻量,还可以用于其他框架,比如 React
、 Vue
和 Angular
。
ByteMD
内置了基本 Markdown 语法的扩展插件系统,开发者为编辑器添加额外的功能非常简单,比如代码语法高亮显示,数学公式和流程图。如果这些插件还不能满足的需要,我们也可以编写自己的插件。
ByteMD
已经正确处理了诸如 <script> 和 <img onerror> 等常见的跨网站脚本攻击,不需要引入额外的 DOM 防攻击步骤。
ByteMD
可以在没有额外配置的服务器环境中呈现 SSR。SSR 具有较好的 SEO 性能和较快的传输速度,对需要做 SEO 优化的页面很有帮助。
认真来说,其实官方文档都说了,只是自己的技术太菜了吧!
不知道大家有没有在掘金社区上发过文章,掘金上内置的 Markdown 编辑器内置了很多好看的主题,写作体验也很棒,界面简洁,没有那些永远用不上的功能。日常使用的文字、图片、公式、流程图、代码、表格、代码高亮等都有。
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/