interface IHintData {
  html: string;
  value: string;
}

interface IHintExtend {
    key: string;

    hint?(value: string): IHintData[] | Promise<IHintData[]>;
}

// POST data
xhr.send(formData);  // formData = FormData.append("file[]", File)
// return data
{
 "msg": "",
 "code": 0,
 "data": {
 "errFiles": ['filename', 'filename2'],
 "succMap": {
   "filename3": "filepath3",
   "filename3": "filepath3"
   }
 }
}

// POST data
xhr.send(JSON.stringify({url: src})); // src 为站外图片地址
// return data
{
 msg: '',
 code: 0,
 data : {
   originalURL: '',
   url: ''
 }
}

if (xhr.status === 200) {
    if (vditor.options.upload.success) {
        vditor.options.upload.success(editorElement, **Объект options**

* string — путь к изображению эмодзи;
* hljs?: IHljs — см. options.preview.hljs;
* speech?: {enable?: boolean} — параметры чтения выбранного содержимого;
* math?: IMath — конфигурация рендеринга математических формул;
* cdn?: string — адрес собственного CDN;
* transform?(html: string): string — метод обратного вызова перед рендерингом;
* after?() — метод обратного вызова после рендеринга;
* lazyLoadImage?: string — если установлено значение адреса изображения Loading, то включается отложенная загрузка изображений;
* markdown?: options.preview.markdown — параметры Markdown;
* theme?: options.preview.theme — тема;
* render?: options.preview.render — рендеринг;
* 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, option?: IHljs) | Добавление кнопки копирования к блоку кода в element |
| chartRender(element: (HTMLElement \| Document) = document, cdn = options.cdn, theme = options.theme) | Рендеринг графиков |
| mindmapRender(element: (HTMLElement \| Document) = document, cdn = options.cdn, theme = options.theme) | Рендеринг ментальных карт |
| plantumlRender(element: (HTMLElement \| Document) = document, cdn = options.cdn) | Рендеринг plantuml |
| abcRender(element: (HTMLElement \| Document) = document, cdn = options.cdn) | Рендеринг нотных партитур |
| md2html(mdText: string, options?: IPreviewOptions): Promise<string> | Преобразование текста Markdown в HTML. Требуется использовать асинхронное программирование (https://ld246.com/article/1546828434083?r=Vanessa#toc_h3_1) |
| preview(previewElement: HTMLDivElement, markdown: string, options?: IPreviewOptions) | Рендеринг страницы с Markdown-статьёй |
| highlightRender(hljsOption?: IHljs, element?: HTMLElement \| Document, cdn = options.cdn) | Выделение блоков кода в element с помощью подсветки |
| mediaRender(element: HTMLElement) | Рендеринг определённых ссылок как видео, аудио или встроенного iframe |
| mathRender(element: HTMLElement, options?: {cdn?: string, math?: IMath}) | Рендеринг математических формул |
| speechRender(element: HTMLElement, lang?: (keyof II18nLang)) | Чтение выделенного текста |
| graphvizRender(element: HTMLElement, cdn?: string) | Рендеринг graphviz |
| outlineRender(contentElement: HTMLElement, targetElement: Element) | Рендеринг оглавления |
| lazyLoadImageRender(element: (HTMLElement \| Document) = document) | Рендеринг изображений с отложенной загрузкой |
| setCodeTheme(codeTheme: string, cdn = options.cdn) | Установка темы кода. codeTheme см. в options.preview.hljs.style |
| setContentTheme(contentTheme: string, path: string) | Установка темы контента. contentTheme см. в options.preview.theme.list |

## 🏗 Разработка документации
### Принцип работы
* Обсуждение [Markdown-редактора «что видишь, то и получаешь»](https://ld246.com/article/1579414663700)
* Реализация Vditor для Markdown «что видишь, то и получаешь» (https://ld246.com/article/1577370404903)
* Lute — оптимизированный для китайского языка движок Markdown, поддерживающий Go и JavaScript (https://ld246.com/article/1567047822949)

### Среда
1. Установите LTS-версию [node](https://nodejs.org/).
2. Скачайте (https://github.com/Vanessa219/vditor/archive/master.zip) последнюю версию кода и распакуйте её.
3. В корневом каталоге выполните команду npm install.
4. Выполните команду npm run start для запуска локального сервера и откройте http://localhost:9000.
5. Внесите изменения в код.
6. Выполните команду npm run build для упаковки кода в каталог dist.

### Переключение на CDN
Поскольку используется механизм отложенной загрузки, по умолчанию CDN — это [https://unpkg.com/vditor](https://unpkg.com/vditor)@версия.
Если необходимо внести изменения в код или использовать собственный CDN, выполните следующие действия:
* При инициализации настройте параметры `options` и `IPreviewOptions`, включая `cdn`, `emojiPath` и `themes`.
* В методах `highlightRender`, `mathRender`, `abcRender`, `chartRender`, `mermaidRender`, `flowchartRender`, `mindmapRender`, `graphvizRender`, `setCodeTheme` и `setContentTheme` добавьте параметр cdn.
* Скопируйте каталог dist после успешной сборки в нужное место или в каталог dist на [jsDelivr](https://www.jsdelivr.com/package/npm/vditor?path=dist).

### Обновление
При обновлении версии внимательно прочитайте раздел «Обновление» в [CHANGELOG](https://github.com/Vanessa219/vditor/blob/master/CHANGELOG.md).

## Ⓜ️ Руководство по использованию Markdown
* Основы синтаксиса (https://ld246.com/article/1583129520165)
* Расширенный синтаксис (https://ld246.com/article/1583305480675)
* Справочник по быстрому доступу (https://ld246.com/article/1583308420519)

## 🏘️ Сообщество
* Официальный сайт (https://b3log.org/vditor).
* Дискуссионная площадка (https://ld246.com/tag/vditor).
* Сообщить о проблеме (https://github.com/Vanessa219/vditor/issues/new).

## 📄 Лицензия
Vditor использует открытый исходный код MIT.

## 🙏 Благодарность
* Lute (https://github.com/88250/lute) — музыкальный движок для структурированного Markdown, поддерживает Go и JavaScript. **📽️ История**

На ранних этапах разработки Sym мы использовали WYSIWYG-редакторы с форматированным текстом. В то время HTML-редакторы были очень популярны, и их было удобно использовать в проекте, а также они соответствовали привычкам пользователей того времени.

Позже появление Markdown постепенно изменило способ вёрстки у всех. Кроме того, поскольку другие наши проекты ориентированы на программистов, переход на использование md был логичным шагом. Мы выбрали CodeMirror — отличный редактор, который предоставляет разработчикам богатый программный интерфейс и хорошо совместим с различными браузерами.

Однако позже, по мере развития наших бизнес-требований, использование CodeMirror иногда казалось довольно «громоздким». Например, для реализации автоматического завершения списка имён пользователей, вставки эмодзи, загрузки файлов и т. д. требовалась глубокая вторичная разработка, хотя эти бизнес-потребности часто являются общими и необходимыми для многих сценариев проекта.

Наконец, мы решили начать создавать собственный редактор в Sym. После нескольких версий итераций редактор Sym становился всё более зрелым. На нашем сообществе «Цех» (https://ld246.com) люди начали спрашивать, можем ли мы выделить редактор и предоставить его всем для использования. В это же время наш фронтенд-разработчик V чувствовала, что ей тяжело поддерживать редакторы, разбросанные по разным проектам, и она была увлечена TypeScript, поэтому решила использовать ts для создания совершенно нового редактора md для браузера.

Так появился Vditor.