md editor v3

? MD-Editor-V3

Английский | 中文

Редактор Markdown для VUE3, разработанный в jsx и typescript .

• Документация и пример: Go

• Тот же редактор серии для React: MD-Editor-RT

️ функции

• Панель инструментов, экрана или экрана на веб -страницах и так далее.
• Темы, встроенные по умолчанию и темные темы.
• Комплект ключа для редактора.
• Украшите свой контент prettier (только для содержимого уценки, а не кода и другого текста).
• Многоязычный, встроенный китайский и английский (по умолчанию: китайский).
• Загрузите изображение, вставьте или выключите изображение и загрузите его.
• Рендеринг статьи напрямую (без редактора, нет слушателя событий, только предварительный просмотр контента).
• Тема предварительного просмотра, default , vuepress , github , cyanosis , mk-cute , smart-blue Styles (не идентичен). Это также можно настроить (см. Пример страницы).
• mermaid (> = 1,8,0), математическая формула katex (> = 1.9.0).
• Настройте панель инструментов, как вам нравится.
• Импорт по требованию (> = 4,0,0).

? Предварительный просмотр

Тема по умолчанию	Темная тема	Только предварительный просмотр

Вводная подсказка и Марк, расширения эмодзи

? Установить

yarn add md-editor-v3

Используйте существующее расширение языка и темы, такого как японский

yarn add @vavt/cm-extension

Используйте существующие компоненты панели инструментов, такие как экспорт контента как PDF

yarn add @vavt/v3-extension

Для получения дополнительных способов использования или внесения вклад, пожалуйста, обратитесь к: MD-Editor-Extension

Использование

При использовании рендеринга на стороне сервера обязательно установите editorId на постоянное значение.

Начиная с 4.0.0 , внутренние компоненты могут быть импортированы по требованию.

✍? Дисплей Редактор

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

Только предварительный просмотр

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

При использовании рендеринга на стороне сервера scrollElement должен быть типа строки, например: html , body , #id , .class .

---

Для получения дополнительной информации, пожалуйста, посетите документ.