ByteMD基于 Svelte 的 Markdown 组件
ByteMD 是一个用 Svelte 构建的 Markdown 编辑器组件，由字节跳动开源。它也可以用于其他库/框架，例如 React、Vue 和 Angular。
特征
- 轻量级且与框架无关：ByteMD 是用Svelte 构建的，编译为 vanilla JS DOM 操作，无需导入任何 UI 框架运行时包，这使得它轻量级，并且很容易适应其他库/框架。
- 易于扩展：ByteMD 有一个插件系统来扩展基本的 Markdown 语法，可以很容易地添加额外的功能，如代码语法高亮、数学方程和美人鱼流程图。如果这些插件不能满足你的需求，你也可以编写自己的插件。
- 默认安全：ByteMD 已正确地处理跨站点脚本（XSS）攻击，如
<script>与<img onerror>，无需引入额外的 DOM 清理步骤。 - SSR 兼容：ByteMD 可用于服务器端渲染（SSR）环境，无需额外配置。SSR 在某些情况下被广泛使用，因为它具有更好的 SEO 和在慢速网络连接中快速获取内容。
用法
有两个组件：Editor和Viewer。Editor顾名思义就是 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 })
})
评论