md editor v3

? md-editor-v3

Inglês | 中文

Editor de Markdown para Vue3, desenvolvido em jsx e typescript .

• Documentação e Exemplo: Vá

• O mesmo editor da série para React: MD-Editor-RT

️ Recursos

• Barra de ferramentas, Screenfull ou Screenfull em páginas da web e assim por diante.
• Temas, temas inadimplentes e escuros embutidos.
• Chave de atalho para editor.
• Embeleza seu conteúdo por prettier (apenas para o conteúdo de marcação, não pelo código e outro texto).
• Multi-idioma, de construção chinesa e inglesa (padrão: chinês).
• Faça upload de imagem, cole ou prenda a imagem e faça o upload.
• Renderize o artigo diretamente (nenhum editor, nenhum ouvinte de eventos, apenas visualização do conteúdo).
• Tema de pré-visualização, default , vuepress , github , cyanosis , estilos de smart-blue mk-cute , mk (não idênticos). Também pode ser personalizado (consulte a página de exemplo).
• mermaid (> = 1.8.0), fórmula matemática katex (> = 1.9.0).
• Personalize a barra de ferramentas como você quiser.
• Importação sob demanda (> = 4.0.0).

? Visualização

Tema padrão	Tema sombrio	Apenas visualização

Prompt de entrada e marca, extensões emoji

? Instalar

yarn add md-editor-v3

Use a extensão existente de linguagem e tema, como o japonês

yarn add @vavt/cm-extension

Use componentes existentes da barra de ferramentas, como exportar conteúdo como PDF

yarn add @vavt/v3-extension

Para mais maneiras de usar ou contribuir, consulte: MD-Editor-Extensão

Uso

Ao usar a renderização do lado do servidor, certifique-se de definir editorId como um valor constante.

A partir de 4.0.0 , componentes internos podem ser importados sob demanda.

✍? Editor de exibição

< template >
  < MdEditor v-model = " text " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdEditor } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/style.css ' ;

const text = ref ( ' # Hello Editor ' );
</ script >

Apenas visualização

< template >
  < MdPreview :id = " id " :modelValue = " text " />
  < MdCatalog :editorId = " id " :scrollElement = " scrollElement " />
</ template >

< script setup>
import { ref } from ' vue ' ;
import { MdPreview , MdCatalog } from ' md-editor-v3 ' ;
import ' md-editor-v3/lib/preview.css ' ;

const id = ' preview-only ' ;
const text = ref ( ' # Hello Editor ' );
const scrollElement = document . documentElement ;
</ script >

Ao usar a renderização do lado do servidor, scrollElement deve ser do tipo string, por exemplo: html , body , #id , .class .

---

Para mais uso, visite o documento.