ByteMD 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
ByteMD 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
ByteMD 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript TypeScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 罗奇奇
适用人群 未知
收录时间 2021-12-17

软件简介

ByteMD 是一个用 Svelte 构建的 Markdown 编辑器组件,由字节跳动开源。它也可以用于其他库/框架,例如 React、Vue 和 Angular。

特征

  1. 轻量级且与框架无关:ByteMD 是用Svelte 构建的,编译为 vanilla JS DOM 操作,无需导入任何 UI 框架运行时包,这使得它轻量级,并且很容易适应其他库/框架。
  2. 易于扩展:ByteMD 有一个插件系统来扩展基本的 Markdown 语法,可以很容易地添加额外的功能,如代码语法高亮、数学方程和美人鱼流程图。如果这些插件不能满足你的需求,你也可以编写自己的插件。
  3. 默认安全:ByteMD 已正确地处理跨站点脚本(XSS)攻击,如<script><img onerror>,无需引入额外的 DOM 清理步骤。
  4. SSR 兼容:ByteMD 可用于服务器端渲染(SSR)环境,无需额外配置。SSR 在某些情况下被广泛使用,因为它具有更好的 SEO 和在慢速网络连接中快速获取内容。

用法

有两个组件:EditorViewerEditor顾名思义就是 Markdown 编辑器;Viewer通常用于显示渲染的 Markdown 结果,无需编辑。

使用组件前,记得导入CSS文件,使样式正确:

import 'bytemd/dist/index.min.css'

Svelte

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

  let value;
  const plugins = [
    gfm(),
    // Add more plugins here
  ];

  function handleChange(e) {
    value = e.detail.value;
  }
</script>

<template>
  <Editor {value} {plugins} on:change={handleChange} />
</template>

React

import { Editor, Viewer } from '@bytemd/react'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

const App = () => {
  const [value, setValue] = useState('')

  return (
    <Editor
      value={value}
      plugins={plugins}
      onChange={(v) => {
        setValue(v)
      }}
    />
  )
}

Vue

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

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

const plugins = [
  gfm(),
  // Add more plugins here
]

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

Vanilla JS

import { Editor, Viewer } from 'bytemd'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

const editor = new Editor({
  target: document.body, // DOM to render
  props: {
    value: '',
    plugins,
  },
})

editor.$on('change', (e) => {
  editor.$set({ value: e.detail.value })
})
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部