md editor rt

? md-editor-rt

Bahasa Inggris | 中文

Editor Markdown untuk react , dikembangkan dalam jsx dan typescript .

• Dokumentasi dan Demo ： GO

• Editor seri yang sama untuk VUE3 ： MD-editor-V3

️ fitur

• Toolbar, screenfull atau screenfull di halaman web dan sebagainya.
• Tema, tema default dan gelap bawaan.
• Kunci pintas untuk editor.
• Percantik konten Anda dengan prettier (hanya untuk konten penurunan harga, bukan kode dan teks lainnya).
• Multi-bahasa, build-in China dan Inggris (default: Cina).
• Unggah gambar, tempel atau klip gambar dan unggah.
• Artikel Render secara langsung (tidak ada editor, tidak ada pendengar acara, hanya pratinjau konten).
• Tema pratinjau, default , vuepress , github , cyanosis , mk-cute , gaya smart-blue (tidak identik). Itu dapat disesuaikan juga (lihat halaman contoh).
• mermaid (> = 1.3.0), rumus matematika katex （> = 1.4.0）.
• Kustomisasi toolbar sesuka Anda.
• Impor sesuai permintaan (> = 4.0.0).

? Pratinjau

Tema default	Tema Gelap	Pratinjau saja

Memasukkan prompt dan tanda, ekstensi emoji

? Memasang

yarn add md-editor-rt

Gunakan perpanjangan bahasa dan tema yang ada, seperti orang Jepang

yarn add @vavt/cm-extension

Gunakan komponen bilah alat yang ada, seperti mengekspor konten sebagai pdf

yarn add @vavt/v3-extension

Untuk lebih banyak cara menggunakan atau berkontribusi, silakan merujuk ke: MD-editor-Extension

Penggunaan

Mulai dari 4.0.0 , komponen internal dapat diimpor sesuai permintaan.

✍? Editor tampilan

 import React , { useState } from 'react' ;
import { MdEditor } from 'md-editor-rt' ;
import 'md-editor-rt/lib/style.css' ;

export default ( ) => {
  const [ text , setText ] = useState ( '# Hello Editor' ) ;
  return < MdEditor modelValue = { text } onChange = { setText } /> ;
} ;

Pratinjau saja

 import React , { useState } from 'react' ;
import { MdPreview , MdCatalog } from 'md-editor-rt' ;
import 'md-editor-rt/lib/preview.css' ;

const scrollElement = document . documentElement ;

export default ( ) => {
  const [ text ] = useState ( '# Hello Editor' ) ;
  const [ id ] = useState ( 'preview-only' ) ;

  return (
    < >
      < MdPreview id = { id } modelValue = { text } />
      < MdCatalog editorId = { id } scrollElement = { scrollElement } />
    </ >
  ) ;
} ;

Saat menggunakan rendering sisi server, scrollElement harus dari tipe string, misalnya: html , body , #id , .class .

---

Untuk penggunaan lebih lanjut, silakan kunjungi dokumennya.