ByteMD

特点

• 轻量级且与框架无关：ByteMD 使用Svelte构建。它编译为原始 JS DOM 操作，无需导入任何 UI 框架运行时包，这使其轻量级且易于适应其他库/框架。
• 易于扩展：ByteMD 有一个插件系统来扩展基本的 Markdown 语法，可以轻松添加其他功能，例如代码语法突出显示、数学方程式和Mermaid流程图。如果这些插件不能满足您的需求，您还可以编写自己的插件。
• 默认安全： ByteMD 已正确处理跨站点脚本 (XSS)攻击，例如<script>和<img onerror>。无需引入额外的 DOM 清理步骤。
• 兼容 SSR ：ByteMD 无需额外配置即可在服务器端渲染（SSR）环境中使用。由于 SSR 具有更好的 SEO 和在慢速网络连接下快速的内容加载时间，因此在某些情况下被广泛使用。
• 开源：ByteMD 是一个字节开源项目，代码透明，可以自由使用和修改。

安装方式

你可以通过 npm 或 yarn 安装 ByteMD：

npm install bytemd

或

yarn add bytemd

使用示例

导入样式

import 'bytemd/dist/index.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 { useState } from 'react';
import { Editor } from 'bytemd';
import gfm from '@bytemd/plugin-gfm';

const plugins = [gfm()];

function MyEditor() {
  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 { ref } from 'vue';
import { Editor } from 'bytemd';
import gfm from '@bytemd/plugin-gfm';

export default {
  setup() {
    const value = ref('');
    const plugins = [gfm()];

    function handleChange(v) {
      value.value = v;
    }

    return { value, plugins, handleChange };
  }
};
</script>

Vanilla JS 示例

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

const plugins = [gfm()];
const editor = new Editor({
  target: document.body,
  props: {
    value: '',
    plugins,
  },
});

editor.$on('change', (e) => {
  editor.$set({ value: e.detail.value });
});

常用 API 介绍

• Editor：编辑器组件，支持 React、Vue 和 Vanilla JS。
• Viewer：Markdown 内容查看组件，支持仅渲染和显示 Markdown 内容。
• plugins：插件数组，用于扩展编辑器的功能。
• value：编辑器的初始内容，类型为字符串。
• onChange：内容变化时的回调函数。
• mode：编辑器显示模式，可选值有 split, tab, auto，默认值为 auto。
• uploadImages：自定义图片上传函数，如果设置，将在工具栏显示上传图片的图标。

高级用法

ByteMD 提供了一些高级功能和用法，例如自定义插件、使用不同的主题、定制编辑器样式等。

自定义插件

你可以根据需要创建自己的插件来扩展 ByteMD 的功能。例如，添加一个支持特定 Markdown 语法的插件：

import { useState } from 'react';
import { Editor } from 'bytemd';
import { BytemdPlugin } from 'bytemd';

function myPlugin() {
  return {
    remark: (processor) => {
      processor.use(() => {
        // 自定义 remark 插件逻辑
      });
    },
  };
}

const plugins = [myPlugin()];

function MyEditor() {
  const [value, setValue] = useState('');

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

官方资料

• ByteMD 官方网站
• GitHub 仓库