Слияние кода завершено, страница обновится автоматически
Разделение экрана для предварительного просмотра (SV)
Традиционный режим разделения экрана подходит для редактирования Markdown на большом экране.
🍱 Поддержка синтаксиса
Большинство этих функций можно включить или отключить с помощью переключателей, разработчики могут выбирать функции в соответствии со своими потребностями.
🗃 Примеры использования
🛠️ Использование документации
npm install vditor --save
import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor(id, {options...})
<!-- ⚠️В производственной среде укажите номер версии, например https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>
Внешний вид редактора. Встроенные темы classic и dark.
options.theme.setTheme.Внешний вид вывода Markdown. Встроенные темы ant-design, light, dark и wechat. Поддерживает интерфейс расширения тем контента.
class="vditor-reset" к отображаемым элементам.options.preview.theme.IPreviewOptions.theme.setContentTheme или setTheme.Внешний вид блоков кода. Встроенные 36 тем кода, таких как github.
options.preview.hljs можно настроить стиль блоков кода, номера строк и их включение.IPreviewOptions.hljs можно настроить стиль блоков кода, номера строк и их включение.setCodeTheme или setTheme. false
| headers | Запрос-заголовок | - |
|---|---|---|
| filename(name: string): string | Безопасная обработка имени файла | name => name.replace(/\W/g, '') |
| accept | Тип файла для загрузки, аналогично input accept | - |
| validate(files: File[]) => string | boolean | Проверка, при успешном выполнении возвращает true, в противном случае — сообщение об ошибке | - |
| handler(files: File[]) => string | null | Promise | Promise | Пользовательская загрузка, возвращает сообщение об ошибке при возникновении ошибки | - |
| format(files: File[], responseText: string): string | Преобразование данных ответа сервера для соответствия встроенной структуре данных | - |
| file(files: File[]): File[] | Promise<File[]> | Обработка загруженных файлов и их последующий возврат | - |
| setHeaders(): { [key: string]: string } | Установка заголовков перед загрузкой с использованием возвращаемого значения | - |
| extraData: { [key: string]: string | Blob } | Добавление дополнительных параметров к FormData | - |
| multiple | Множественность файлов для загрузки | true |
| fieldName | Имя поля для загрузки | 'file[]' |
| Описание | Значение по умолчанию | |
|---|---|---|
| enable | Поддержка изменения размера перетаскиванием | false |
| position | Позиция панели перетаскивания: «top», «bottom» | «bottom» |
| after(height: number) | Обратный вызов после завершения перетаскивания | - |
| Описание | Значение по умолчанию | |
|---|---|---|
| preview | className для элемента предварительного просмотра | '' |
| Описание | Значение по умолчанию | |
|---|---|---|
| index | Уровень полноэкранного слоя | 90 |
| Описание | Значение по умолчанию | |
|---|---|---|
| enable | Отображение структуры по умолчанию при инициализации | false |
| position | Расположение структуры: «left», «right» | «left» |
| Описание | |
|---|---|
| exportJSON(markdown: string) | Получение JSON на основе Markdown |
| getValue() | Получение содержимого Markdown |
| getHTML() | Получение HTML-содержимого |
| insertValue(value: string, render = true) | Вставка содержимого в фокус и рендеринг Markdown по умолчанию |
| focus() | Фокусировка на редакторе |
| blur() | Потеря фокуса редактора |
| disabled() | Отключение редактора |
| enable() | Включение редактора после отключения |
| getSelection(): string | Возвращает выделенный текст |
| setValue(markdown: string, clearStack = false) | Установка содержимого редактора и очистка истории отмены при необходимости |
| clearStack() | Очистка стека отмены и повтора |
| renderPreview(value?: string) | Установка содержимого области предварительного просмотра |
| getCursorPosition():{top: number, left: number} | Получение позиции курсора |
| deleteValue() | Удаление выделенного текста |
| updateValue(value: string) | Обновление выделенного текста |
| isUploading() | Определение, продолжается ли загрузка |
| clearCache() | Очистка кеша |
| disabledCache() | Отключение кеширования |
| enableCache() | Включение кеширования |
| html2md(value: string) | Преобразование HTML в Markdown |
| tip(text: string, time: number) | Сообщение с подсказкой. Если time равно 0, то сообщение будет отображаться постоянно |
| setPreviewMode(mode: "both" | "editor") | Установка режима предварительного просмотра |
| setTheme(theme: "dark" | "classic", contentTheme?: string, codeTheme?: string, contentThemePath?: string) | Настройка темы, темы контента и стиля кода |
| getCurrentMode(): string | Получение текущего режима редактора |
| destroy() | Уничтожение редактора |
| getCommentIds(): {id: string, top: number}[] | Получение всех комментариев |
| hlCommentIds(ids: string[]) | Подсветка комментариев |
| unHlCommentIds(ids: string[]) | Отмена подсветки комментариев |
| removeCommentIds(removeIds: string[]) | Удаление комментариев |
method.min.js и вызвать следующие методы напрямую:Vditor.mermaidRender(document)
import VditorPreview from 'vditor/dist/method.min'
VditorPreview.mermaidRender(document)
preview, указав следующие параметры:previewElement: HTMLDivElement, // Элемент для рендеринга
markdown: string, // Исходный текст Markdown
options?: IPreviewOptions {
mode: "dark" | "light";
anchor?: number; // Добавить якорь к заголовку 0: не рендерить; 1: рендерить перед заголовком; 2: рендерить после заголовка, по умолчанию 0
customEmoji?: { [key: string]: string }; // Настроить эмодзи, по умолчанию {}
lang?: (keyof II18nLang); // Язык, по умолчанию 'zh_CN'
emojiPath?: string; // Путь к изображениям эмодзи
hljs?: IHljs; // См. options.preview.hljs
speech?: { // Чтение выбранного содержимого
enable?: boolean,
};
math?: IMath; // Конфигурация рендеринга математических формул
cdn?: string; // Адрес пользовательского CDN
transform?(html: string): string; // Обратный вызов перед рендерингом
after?(); // Обратный вызов после рендеринга
lazyLoadImage?: string; // Установить как адрес изображения для загрузки, чтобы включить ленивую загрузку изображений
markdown?: options.preview.markdown;
theme?: options.preview.theme;
renderers?: ILuteRender; // Пользовательский рендеринг https://ld246.com/article/1588412297062
}
method.min.js и index.min.js.| Описание | |
|---|---|
| previewImage(oldImgElement: HTMLImageElement, lang: keyof II18n = "zh_CN", theme = "classic") | Предварительный просмотр изображения при клике |
| mermaidRender(element: HTMLElement, cdn = options.cdn, theme = options.theme) | Рендеринг диаграмм процессов, временных шкал и диаграмм Ганта |
| flowchartRender(element: HTMLElement, cdn = options.cdn) | Рендеринг flowchart |
| codeRender(element: HTMLElement) | Добавление кнопок копирования к кодовым блокам в element |
| chartRender(element: (HTMLElement | Document) = document, cdn = options.cdn, theme = options.theme) | Разработка документации |
Принцип работы
Среда
Переход на CDN
По умолчанию используется CDN https://cdn.jsdelivr.net/npm/vditor@версия_номера. Если вы хотите использовать собственный CDN или изменить существующий, выполните следующие действия:
Обновление
Перед обновлением версии внимательно прочитайте раздел «Обновление» в CHANGELOG.md.
Использование Markdown
Сообщество
Лицензия
Vditor использует лицензию MIT.
Благодарности
Lute — это структурированный Markdown-движок для Go и JavaScript;
highlight.js — подсветка синтаксиса JavaScript;
mermaid — создание диаграмм и блок-схем по тексту аналогично Markdown;
incubator-echarts — мощная интерактивная библиотека диаграмм и визуализации для браузера;
abcjs — библиотека JavaScript для отображения стандартной нотной записи в браузере.
История
В начале разработки Sym мы использовали WYSIWYG-редакторы форматированного текста. В то время HTML-редакторы были очень популярны, и их было легко интегрировать в проекты. Они также соответствовали привычкам пользователей того времени.
Позже популярность Markdown постепенно изменила способ форматирования. Кроме того, поскольку другие наши проекты ориентированы на программистов, переход на md был естественным выбором. Мы выбрали CodeMirror, отличный редактор, который предоставляет разработчикам богатые программистские интерфейсы и хорошую совместимость с различными браузерами.
Со временем использование CodeMirror стало казаться немного «громоздким». Например, для реализации таких функций, как автоматическое завершение списка имён пользователей, вставка эмодзи и загрузка файлов, требуется более глубокая вторичная разработка. Однако эти функции являются общими и необходимыми для многих проектов.
Наконец, мы решили создать собственный редактор в Sym. После нескольких версий итераций редактор Sym стал более зрелым. Некоторые люди в нашем сообществе начали спрашивать, можем ли мы выделить редактор и предоставить его для общего использования. В то же время наш фронтенд-разработчик V предложил идею создания отдельного редактора. Однокурсник, которому было не очень интересно заниматься поддержкой редактора, распределённого по разным проектам, и который симпатизировал TypeScript, решил использовать ts для создания нового браузера на базе редактора Markdown.
Так появился Vditor.
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.