高清无码在线视频,五月深深爱亭亭,亚洲男人天堂2025,五月狠狠激综合,狼人色综合,av在线免费网站,亚洲www色,黄色在线观看视频

ByteMD基于 Svelte 的 Markdown 組件

聯(lián)合創(chuàng)作 · 2023-09-30 14:24

ByteMD 是一個(gè)用 Svelte 構(gòu)建的 Markdown 編輯器組件，由字節(jié)跳動(dòng)開源。它也可以用于其他庫/框架，例如 React、Vue 和 Angular。

特征

輕量級(jí)且與框架無關(guān)：ByteMD 是用Svelte 構(gòu)建的，編譯為 vanilla JS DOM 操作，無需導(dǎo)入任何 UI 框架運(yùn)行時(shí)包，這使得它輕量級(jí)，并且很容易適應(yīng)其他庫/框架。
易于擴(kuò)展：ByteMD 有一個(gè)插件系統(tǒng)來擴(kuò)展基本的 Markdown 語法，可以很容易地添加額外的功能，如代碼語法高亮、數(shù)學(xué)方程和美人魚流程圖。如果這些插件不能滿足你的需求，你也可以編寫自己的插件。
默認(rèn)安全：ByteMD 已正確地處理跨站點(diǎn)腳本（XSS）攻擊，如<script>與<img onerror>，無需引入額外的 DOM 清理步驟。
SSR 兼容：ByteMD 可用于服務(wù)器端渲染（SSR）環(huán)境，無需額外配置。SSR 在某些情況下被廣泛使用，因?yàn)樗哂懈玫?SEO 和在慢速網(wǎng)絡(luò)連接中快速獲取內(nèi)容。

用法

有兩個(gè)組件：Editor和Viewer。Editor顧名思義就是 Markdown 編輯器；Viewer通常用于顯示渲染的 Markdown 結(jié)果，無需編輯。

使用組件前，記得導(dǎo)入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 })
})

點(diǎn)贊

評(píng)論

編輯分享

舉報(bào)