md editor v3

? MD-EDITOR-V3

Inglés | 中文

Editor de Markdown para VUE3, desarrollado en jsx y typescript .

• Documentación y ejemplo: Go

• El mismo editor de la serie para React: MD-Editor-RT

Min características

• Barra de herramientas, pantalla sesente o pantalla en las páginas web, etc.
• Temas, temas incorporados predeterminados y oscuros.
• Clave de acceso directo para editor.
• Embellece tu contenido de prettier (solo para el contenido de Markdown, no el código y otro texto).
• Multi-lenguaje, construido chino e inglés (predeterminado: chino).
• Cargue una imagen, pegue o recorte la imagen y cárguela.
• Renderizar el artículo directamente (sin editor, sin oyente de eventos, solo una vista previa del contenido).
• Tema de Vista previa, default , vuepress , github , cyanosis , mk-cute , smart-blue Styles (no idéntico). También se puede personalizar (consulte la página de ejemplo).
• mermaid (> = 1.8.0), fórmula matemática katex (> = 1.9.0).
• Personalice la barra de herramientas como desee.
• Importación a pedido (> = 4.0.0).

? Avance

Tema predeterminado	Tema oscuro	Vista previa solamente

Ingreso de indicadores y mark, extensiones emoji

? Instalar

yarn add md-editor-v3

Use la extensión existente del lenguaje y el tema, como el japonés

yarn add @vavt/cm-extension

Utilice los componentes existentes de la barra de herramientas, como la exportación de contenido como PDF

yarn add @vavt/v3-extension

Para obtener más formas de usar o contribuir, consulte: MD-EDITOR-Extension

Uso

Al usar la representación del lado del servidor, asegúrese de establecer editorId en un valor constante.

A partir de 4.0.0 , los componentes internos se pueden importar a pedido.

✍? Editor de visualización

< 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 >

Vista previa solamente

< 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 >

Al usar la representación del lado del servidor, scrollElement debe ser de tipo de cadena, por ejemplo: html , body , #id , .class .

---

Para más uso, visite el documento.