字节跳动(掘金社区)出品MarkDown编辑器——ByteMD

439 ℃

ByteMD,作为字节跳动(即掘金社区)出品的一款JavaScript库,它成为了web开发中不可或缺的工具。这款Markdown格式的富文本编辑器,让前端开发者可以更加便捷地将一个优雅、高效的Markdown编辑器集成到他们的项目中,从而为用户提供出色的编辑体验。

字节跳动(掘金社区)出品MarkDown编辑器——ByteMD

ByteMD免费开源说明

ByteMD 是由字节跳动开发的 Markdown 编辑器,项目基于 MIT 协议免费开源,任何人都可以免费下载来使用,也可以用在商业项目上。

ByteMD的技术特点

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

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

3、安全的编辑器:ByteMD 已经正确处理了诸如 <script> 和 <img onerror> 等常见的跨网站脚本攻击,不需要引入额外的 DOM 防攻击步骤;

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

官方提供的开发文档是英文的,阅览起来较为费劲,并且很多细节功能没有什么代码例子。

ByteMD轻松上手

//导入 CSS 文件
import 'bytemd/dist/index.css'

//脚手架安装
npm i @bytemd/vue

ByteMD示例

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>

<script>
import gfm from '@bytemd/plugin-gfm'
import { Editor, Viewer } from '@bytemd/vue'

const plugins = [
  gfm(),
  // 这里可以加载更多扩展插件
]

export default {
  components: { Editor },
  data() {
    return { value: '', plugins }
  },
  methods: {
    handleChange(v) {
      this.value = v
    },
  },
}
</script>

ByteMD比较常用的插件

import breaks from '@bytemd/plugin-breaks'
import gemoji from '@bytemd/plugin-gemoji'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math-ssr'
import medium from '@bytemd/plugin-medium-zoom'
import mermaid from '@bytemd/plugin-mermaid'
import frontmatter from '@bytemd/plugin-frontmatter'
import themeStyle from './themeStyle'
import highlightStyle from './highlightStyle'

进入ByteMD官网

一款免费开源的 JavaScript 数据库——PouchDB

一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

javascript利用pinyin库把汉字转拼音(不带声调)

JavaScript库读取Excel数据代码示例

一款专为Mac电脑打造的编辑器应用——妙言(markdown笔记)

标签: ByteMD, JavaScript库, MarkDown编辑器, 富文本编辑器

上面是“字节跳动(掘金社区)出品MarkDown编辑器——ByteMD”的全面内容,想了解更多关于 前端UI组件库 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_14552.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

帝国CMS教程之如何实现发布于10秒前 1周前 1个月
vue利用moment获取世界各地实时时间
帝国cms技巧之发布人的IP显示问题
Vue项目中如何使用过滤器(代码介绍)?
如何使用Nginx对HTTP请求进行反向代理缓存