vditor
v3.10.7
Легкий в использовании редактор Markdown, созданный для адаптации к различным сценариям приложений
Английский | Демо
Vditor-это редактор Markdown на стороне браузера, который поддерживает Wysiwyg, мгновенный рендеринг (аналогичный типоре) и режима предварительного просмотра сплит-экрана. Он реализован с использованием TypeScript и поддерживает натуральный JavaScript, а также такие рамки, как Vue, React, Angular и Svelte.
Добро пожаловать в официальную зону обсуждения VDitor, чтобы узнать больше. В то же время, мы также можем следовать за B3Log Open Source Community Wechat Office Account B3log开源:
Благодаря популярности методов набора маркировки, все больше и больше приложений начинали интегрировать редакторов Markdown. Текущее состояние основного интегрированного редактора Marckdown заключается в следующем:
Эти три точки точно соответствуют трем сценариям приложения:
Следовательно, редактор разметки, который может адаптироваться к сценарию приложения , имеет решающее значение, и его необходимо учитывать:
Vditor предпринял усилия в этих областях, надеясь внести некоторый вклад в современное поле универсального редактирования.
Режим Wysiwyg более дружелюбен для пользователей, которые не знакомы с Markdown, а также могут использоваться беспрепятственно, если вы знакомы с Markdown.
Режим мгновенного рендеринга не должен быть незнаком для пользователей, которые знакомы с типорой. Теоретически, это самый элегантный способ редактирования отметки.
Традиционный режим предварительного просмотра разделенного экрана подходит для редактирования разметки под большими экранами.
Большинство из вышеперечисленных функций могут быть включены путем переключения конфигурации. Разработчики могут выбрать сопоставление в зависимости от сценариев применения.
npm install vditor --save import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor ( id , { options... } ) <!-- ️生产环境请指定版本号，如 https://unpkg.com/[email protected]/dist... -->
< link rel =" stylesheet " href =" https://unpkg.com/vditor/dist/index.css " />
< script src =" https://unpkg.com/vditor/dist/index.min.js " > </ script >Появление редактора. Встроенные классические, темные 2 наборы тем.
options.themesetThemeВнешний вид выхода HTML от Markdown. Встроенные муравьиные, легкие, темные, WeChat 4 наборы тем. Поддерживает интерфейс расширения темы контента.
class="vditor-reset" в элемент дисплеяoptions.preview.themeIPreviewOptions.themesetTheme или setContentTheme Появление кодового блока. Встроенный GitHub и другие 36 наборов тем.
options.preview.hljsIPreviewOptions.hljssetTheme или setCodeTheme Вы можете заполнить id элемента или собственное HTMLElement элемента
HTMLElement самого элемента вам необходимо установить options.cache.id или установить options.cache.enable на false
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| i18n | Многоязычный, см. ITIPS | - |
| Undodelay | История интервал | - |
| После | Метод обратного вызовов после того, как редактор отображается асинхронно | - |
| высота | Общая высота редактора | 'авто' |
| Минхейт | Минимальная высота зоны редактирования | - |
| ширина | Общая ширина редактора, поддержка % | 'авто' |
| заполнитель | Приглашение, когда область ввода пуста | '' |
| ланг | Типы языка: en_us, fr_fr, pt_br, ja_jp, ko_kr, ru_ru, sv_se, zh_cn, zh_tw | 'zh_cn' |
| Ввод (значение: строка) | Запускается после ввода | - |
| фокус (значение: строка) | Триггер после фокуса | - |
| размытие (значение: строка) | Вызвано | - |
| Keydown (событие: keyboardevent) | Запускается после нажатия | - |
| ESC (значение: строка) | Запускается после ESC Press | - |
| ctrlenter (значение: строка) | ⌘/ctrl+enter запускается после нажатия | - |
| Выберите (значение: строка) | Запускается после выбора текста в редакторе | - |
| вкладка | Ключ вкладок управляет строками, поддерживает t и любые строки | - |
| машиностроение | Включить режим пишущей машинки | ЛОЖЬ |
| CDN | Настройка самопостроенного адреса CDN | https://unpkg.com/vditor@${VDITOR_VERSION} |
| режим | Дополнительный режим: SV, IR, Wysiwyg | 'ir' |
| отладчик | Отображать журналы | ЛОЖЬ |
| ценить | Значение инициализации редактора | '' |
| тема | Тема: классический, темный | 'классический' |
| икона | Стиль иконы: муравей, материал | 'муравей' |
| CustomRenders: {Language: String, рендеринг: (элемент: htmlelement, vditor: ivditor) => void} [] | Пользовательский рендерер | [] |
toolbar: ['emoji', 'br', 'bold', '|', 'line'] . См. SRC/TS/UTIL/Options.TS для значения по умолчаниюemoji , headings , bold , italic , strike , | , line , quote , list , ordered-list , check , outdent , indent , code , inline-code , insert-after , вставка, insert-before , undo , redo , upload , link , table , record , edit-mode , both help preview info fullscreen , outline , code-theme br content-theme devtools exportname не в перечислении, вы можете добавить пользовательскую кнопку в формате следующим образом: new Vditor ( 'vditor' , {
toolbar : [
{
hotkey : '⇧⌘S' ,
name : 'sponsor' ,
tipPosition : 's' ,
tip : '成为赞助者' ,
className : 'right' ,
icon : '<svg t="1589994565028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2808" width="32" height="32"><path d="M506.6 423.6m-29.8 0a29.8 29.8 0 1 0 59.6 0 29.8 29.8 0 1 0-59.6 0Z" fill="#0F0F0F" p-id="2809"></path><path d="M717.8 114.5c-83.5 0-158.4 65.4-211.2 122-52.7-56.6-127.7-122-211.2-122-159.5 0-273.9 129.3-273.9 288.9C21.5 562.9 429.3 913 506.6 913s485.1-350.1 485.1-509.7c0.1-159.5-114.4-288.8-273.9-288.8z" fill="#FAFCFB" p-id="2810"></path><path d="M506.6 926c-22 0-61-20.1-116-59.6-51.5-37-109.9-86.4-164.6-139-65.4-63-217.5-220.6-217.5-324 0-81.4 28.6-157.1 80.6-213.1 53.2-57.2 126.4-88.8 206.3-88.8 40 0 81.8 14.1 124.2 41.9 28.1 18.4 56.6 42.8 86.9 74.2 30.3-31.5 58.9-55.8 86.9-74.2 42.5-27.8 84.3-41.9 124.2-41.9 79.9 0 153.2 31.5 206.3 88.8 52 56 80.6 131.7 80.6 213.1 0 103.4-152.1 261-217.5 324-54.6 52.6-113.1 102-164.6 139-54.8 39.5-93.8 59.6-115.8 59.6zM295.4 127.5c-72.6 0-139.1 28.6-187.3 80.4-47.5 51.2-73.7 120.6-73.7 195.4 0 64.8 78.3 178.9 209.6 305.3 53.8 51.8 111.2 100.3 161.7 136.6 56.1 40.4 88.9 54.8 100.9 54.8s44.7-14.4 100.9-54.8c50.5-36.3 108-84.9 161.7-136.6 131.2-126.4 209.6-240.5 209.6-305.3 0-74.9-26.2-144.2-73.7-195.4-48.2-51.9-114.7-80.4-187.3-80.4-61.8 0-127.8 38.5-201.7 117.9-2.5 2.6-5.9 4.1-9.5 4.1s-7.1-1.5-9.5-4.1C423.2 166 357.2 127.5 295.4 127.5z" fill="#141414" p-id="2811"></path><path d="M353.9 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2812"></path><path d="M659.3 415.6m-33.8 0a33.8 33.8 0 1 0 67.6 0 33.8 33.8 0 1 0-67.6 0Z" fill="#0F0F0F" p-id="2813"></path><path d="M411.6 538.5c0 52.3 42.8 95 95 95 52.3 0 95-42.8 95-95v-31.7h-190v31.7z" fill="#5B5143" p-id="2814"></path><path d="M506.6 646.5c-59.6 0-108-48.5-108-108v-31.7c0-7.2 5.8-13 13-13h190.1c7.2 0 13 5.8 13 13v31.7c0 59.5-48.5 108-108.1 108z m-82-126.7v18.7c0 45.2 36.8 82 82 82s82-36.8 82-82v-18.7h-164z" fill="#141414" p-id="2815"></path><path d="M450.4 578.9a54.7 27.5 0 1 0 109.4 0 54.7 27.5 0 1 0-109.4 0Z" fill="#EA64F9" p-id="2816"></path><path d="M256 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2817"></path><path d="M703.3 502.7a32.1 27.5 0 1 0 64.2 0 32.1 27.5 0 1 0-64.2 0Z" fill="#EFAFF9" p-id="2818"></path></svg>' ,
click ( ) { alert ( '捐赠地址：https://ld246.com/sponsor' ) } ,
} ] ,
} )| иллюстрировать | значение по умолчанию | |
|---|---|---|
| имя | Уникальная марка | - |
| икона | SVG значок | - |
| кончик | намекать | - |
| положительное положение | Советы: 'n', 'ne', 'nw', 's', 'se', 'sw', 'w', 'e' | - |
| горячая клавиша | Ярлыки в формате ⇧⌘ / ⌘ / ⌥⌘ ⌥⌘ | - |
| суффикс | Вставьте суффикс в редакцию | - |
| префикс | Вставьте префикс в редакторе | - |
| Нажмите (событие: событие, Vditor: ivditor) | Событие, которое запускается при нажатии на пользовательскую кнопку | - |
| классное имя | Название стиля | '' |
| Панель инструментов?: Array <Options.toolbar> | Подменю | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| Скрывать | Скрыть ли панель инструментов | ЛОЖЬ |
| приколоть | Исправить панель инструментов | ЛОЖЬ |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| давать возможность | Согласно ли счетчик | ЛОЖЬ |
| После (длина: номер, счетчик: опции.counter): void | Обратный вызов подсчета слов | - |
| максимум | Максимальное значение, разрешенное | - |
| тип | Тип статистики: 'markdown', 'текст' | 'charkdown' |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| давать возможность | Использовать LocalStorage для кэша | истинный |
| идентификатор | Ключ кеша, первый параметр является элементом и требует активации кэша | - |
| После (html: string): строка | Кэш обратный вызов | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| давать возможность | Сообщите ли режим комментариев | ЛОЖЬ |
| добавить (id: string, text: string, commentsData: iCommentsData []) | Добавить обратный вызов комментариев | - |
| удалить (ids: string []) | Удалить обратный вызов комментариев | - |
| Свитка (вверху: номер) | Прокрутите обратный вызов | - |
| AdvitationTop (CommentsData: IcommentsData []) | При изменении документа высота комментариев адаптирована | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| задерживать | Предварительный просмотр дебайти Millisecond интервалы | 1000 |
| максимума | Максимальная ширина зоны предварительного просмотра | 800 |
| режим | Режим отображения: оба, редактор | 'оба' |
| URL | MD запрос на анализ | - |
| Parse (элемент: htmlelement) | Предварительный просмотр обратного вызова | - |
| Transform (html: String): String | Обратный вызов перед рендерингом | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| Defaultlang | Используйте язык по умолчанию, если язык не указан | '' |
| давать возможность | Должно ли подчеркнуть код | истинный |
| стиль | См. Chroma для дополнительных значений | github |
| льняное блюдо | Сообщите ли номер строки | ЛОЖЬ |
| Ланги | Настроить указанный язык | Code_languages |
| rendermenu (код: htmlelement, копия: htmlelement) | Рендеринг меню | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| Autospace | Автоматические пространства | ЛОЖЬ |
| Gfmautolink | Автоматическая ссылка | истинный |
| fixtermatypo | Автоматическая коррекция термин | ЛОЖЬ |
| ток | Вставьте каталог | ЛОЖЬ |
| сноски | сноска | истинный |
| CodeBlockPreview | Столкнуть ли кодовый блок в режимах wysiwyg и IR | истинный |
| Mathblockpreview | Обращать ли математические формулы в режимах Wysiwyg и IR | истинный |
| Paragraphbeginningspace | Два пустых начинания | ЛОЖЬ |
| дезинфицировать | Включить фильтрацию XSS | истинный |
| ListStyle | Добавить атрибут в стиле данных в список | ЛОЖЬ |
| Linkbase | Ссылка относительного префикса пути | '' |
| LinkPrefix | Ссылка Обязательное префикс | '' |
| отметка | Включить Марк Марк | ЛОЖЬ |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| Текущий | Текущая тема | "свет" |
| список | Список дополнительных тем | {"Ant-Design": "Ant Design", Dark: "Dark", Light: "Light", WeChat: "WeChat"} |
| путь | Адрес стиля темы | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| Inlinedigit | Разрешено ли это считать после того, как встроенная математическая формула начинается $? | ЛОЖЬ |
| макросы | Определения макросов проходят при рендеринге с MathJax | {} |
| двигатель | Математическая формула двигатель: Katex, Mathjax | 'Katex' |
| Mathjaxoptions | Параметры, когда двигатель математического рендеринга формулы является MathJax | - |
Значения по умолчанию: [«Настольный компьютер», «планшет», «мобильный», «mp-wechat», «zhihu»]. Вы можете выбрать из значений по умолчанию для конфигурации или использовать следующие поля для пользовательской разработки.
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| ключ | Кнопка уникально идентифицирована и не может быть пустой | - |
| текст | Кнопка текст | - |
| подсказка | намекать | - |
| классное имя | Кнопка класса | - |
| Нажмите (ключ: строка) | Кнопка нажимает событие обратного вызова | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| давать возможность | Включать мультимедийный рендеринг | истинный |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| Ispreview | Стоит ли предварительно просмотреть картинку | истинный |
| Предварительный просмотр (bom: element) => void | Обработка предварительного просмотра изображения | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| изопен | Открыть ли адрес ссылки | истинный |
| Нажмите (Bom: element) => void | Нажмите на ссылку событие | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| разбор | Выполнять анализ MD | истинный |
| задерживать | Быстро дебайтинг -интервал | 200 |
| эмодзи | По умолчанию эмоджи, можно выбрать из Lute/emoji_map или может быть настроен | {'+1': '?', '-1': '?', 'Heart': '❤', 'cold_sweat': '?' } |
| смайт | Общие советы по выражению | - |
| эмодзипат | Адрес изображения выражения | https://unpkg.com/vditor@${VDITOR_VERSION}/dist/images/emoji |
| Extend: ihintextend [] | Расширение автоматического завершения ключевых слов, таких как @/Tours | [] |
interface IHintData {
html : string ;
value : string ;
}
interface IHintExtend {
key : string ;
hint ? ( value : string ) : IHintData [ ] | Promise < IHintData [ ] > ;
} format может использоваться для преобразования. // POST data
xhr . send ( formData ) ; // formData = FormData.append("file[]", File)
// return data
{
"msg" : "" ,
"code" : 0 ,
"data" : {
"errFiles" : [ 'filename' , 'filename2' ] ,
"succMap" : {
"filename3" : "filepath3" ,
"filename3" : "filepath3"
}
}
}linkToImgUrl может передавать адрес картин в буфер обмена на сервере для сохранения, а его структура данных заключается в следующем: // POST data
xhr . send ( JSON . stringify ( { url : src } ) ) ; // src 为站外图片地址
// return data
{
msg : '' ,
code : 0 ,
data : {
originalURL : '' ,
url : ''
}
}success , format , error не будет инициирована одновременно. Конкретная ситуация вызова выглядит следующим образом: if ( xhr . status === 200 ) {
if ( vditor . options . upload . success ) {
vditor . options . upload . success ( editorElement , xhr . responseText ) ;
} else {
let responseText = xhr . responseText ;
if ( vditor . options . upload . format ) {
responseText = vditor . options . upload . format ( files as File [ ] , xhr . responseText ) ;
}
genUploadedLabel ( responseText , vditor ) ;
}
} else {
if ( vditor . options . upload . error ) {
vditor . options . upload . error ( xhr . responseText ) ;
} else {
vditor . tip . show ( xhr . responseText ) ;
}
}| иллюстрировать | значение по умолчанию | |
|---|---|---|
| URL | Загрузите URL, если он пуст, событие, связанное с загрузкой, не будет запускаемо. | '' |
| максимум | Загрузить максимальный байт файла | 10 * 1024 * 1024 |
| Linktoimgurl | Когда буфер обмена содержит адрес изображения, используйте этот URL -адрес для загрузки снова | '' |
| linktoImgcallback (responseText: string) | Загрузите обратный вызов адреса изображения | - |
| linktoImgformat (responseText: string): string | Форматируйте возвратное значение, загруженное адресом изображения | - |
| Успех (редактор: htmlpreelement, msg: string) | Загрузить успешно обратный вызов | - |
| Ошибка (MSG: String) | Загрузить неудачный обратный вызов | - |
| токен | Проверка загрузки CORS, заголовок x-upload-token | - |
| с Credentials | Контроль доступа к перекрестному сайту | ЛОЖЬ |
| Заголовки | Запросить настройки заголовка | - |
| Имя файла (имя: строка): строка | Обработка безопасности имени файла | name => name.replace (/ w/g, '') |
| принимать | Тип загрузки файла, так же, как вход | - |
| validate (files: file []) => string | логический | Проверьте, верните True, если успешно, в противном случае сообщение об ошибке возврата | - |
| Handler (файлы: файл []) => String | null | Обещание | Обещать | Пользовательская загрузка, вернуть сообщение об ошибке, когда возникает ошибка | - |
| Format (files: file [], responsetext: string): string | Конвертировать данные, возвращаемые сервером, чтобы соответствовать встроенной структуре данных | - |
| file (файлы: файл []): файл [] | Обещание <file []> | Обработать загруженный файл перед возвратом | - |
| setheaders (): {[key: string]: string} | Используйте возвратное значение, чтобы установить заголовок перед загрузкой | - |
| extradata: {[key: string]: string | Blob} | Добавьте дополнительные параметры в FormData | - |
| несколько | Есть несколько загруженных файлов | истинный |
| FieldName | Загрузить имя поля | 'файл[]' |
| renderlinkdest? (vditor: ivditor, node: ilutenode, inting: boolean): [строка, номер] | Обработайте адрес изображения в буфер обмена | '' |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| давать возможность | Поддерживается ли он для перетаскивания размера? | ЛОЖЬ |
| позиция | Положение перетаскивания: «Верх», «Внизу» | 'нижний' |
| После (высота: число) | Обратный вызов закончился перетаскиванием | - |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| предварительный просмотр | Имя класса на элементе предварительного просмотра | '' |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| индекс | Полный уровень экрана | 90 |
| иллюстрировать | значение по умолчанию | |
|---|---|---|
| давать возможность | Отображает ли инициализация контур | ЛОЖЬ |
| позиция | Расположение наброска: «Слева», «Право» | 'левый' |
| иллюстрировать | |
|---|---|
| ExportJson (Markdown: String) | Получите соответствующий JSON в соответствии с Markdown |
| getValue () | Получить контент Markdown |
| gethtml () | Получить HTML -контент |
| INSERTVALUE (значение: строка, render = true) | Вставьте контент в фокус и используйте рендеринг Marckdown по умолчанию |
| Focus () | Сосредоточиться на редакторе |
| Blur () | Сделать редактор из -за фокусировки |
| неполноценный() | Отключить редактор |
| давать возможность() | Недоседает редактор |
| getSelection (): String | Возвращает выбранную строку |
| setValue (Markdown: String, clearStack = false) | Установите контент редактора и выберите Stack History Stack |
| clearStack () | Очистить стек записей Undo и Redo |
| renderpreview (значение?: строка) | Установите содержание области предварительного просмотра |
| getCursorposition (): {top: номер, слева: номер} | Получите позицию фокуса |
| DeleTeValue () | Удалить выбранный контент |
| UpdateValue (значение: строка) | Обновление выбранного контента |
| isuploading () | Загрузка все еще в процессе |
| clearCache () | Чистый кеш |
| disabledCache () | Отключить кеш |
| enablecache () | Включить кеш |
| html2md (значение: строка) | HTML до MD |
| Совет (текст: строка, время: номер) | Подсказка сообщения. Время 0 и будет отображаться |
| SetPreviewMode (режим: "оба" | "Редактор") | Установите режим предварительного просмотра |
| SetTheme (тема: "Dark" | "classic", ContentTeme?: String, CodeTheme?: String, ContentThemePath?: String) | Установите тему, тему контента и стиль блока кода |
| GetCurrentMode (): String | Получить текущий режим редактирования редактора |
| разрушать() | Уничтожить редактора |
| getCommentIds (): {id: string, top: номер} [] | Получите все комментарии |
| HLCommentIds (IDS: String []) | Выделите комментарии |
| untclcommentids (ids: string []) | Отменить комментарии и основные моменты |
| RemoveCommentIds (RemoveIds: String []) | Удалить комментарии |
| UpdateToolbarConfig (config: {hide?: boolean, pin?: boolean}) | Обновите конфигурацию панели инструментов |
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 } ; // 自定义 emoji，默认为 {}
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 ; // 设置为 Loading 图片地址后将启用图片的懒加载
markdown?: options . preview . 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 (элемент: htmlelement, cdn = options.cdn, theme = options.teme) | Блок -схема/схема времени/диаграмма GANT |
| Smilesrender (элемент: htmlelement, cdn = options.cdn, theme = options.teme) | Химическая структура вещества |
| Markmaprender (элемент: htmlelement, cdn = options.cdn) | Маркдаун Карта ума |
| FlowChartrender (элемент: htmlelement, cdn = options.cdn) | Рюза с блок -схемой |
| Коддердер (элемент: htmlelement, опция?: ihljs) | Добавить кнопку копирования в кодовый блок в элементе |
| chartrender (element: (htmlelement | document) = документ, cdn = options.cdn, theme = options.theme) | Рендеринг диаграммы |
| MindMaprender (элемент: (htmlelement | document) = документ, cdn = options.cdn, theme = options.theme) | Рендеринг изображения мозга |
| Plantumlrender (элемент: (htmlelement | document) = документ, cdn = options.cdn) | Plantuml рендеринг |
| Abcrender (элемент: (htmlelement | document) = документ, cdn = options.cdn) | Рендеринг стежка |
| md2html (mdtext: string, options?: ipreviewoptions): обещание <string> | Текст отметки преобразуется в HTML, этот метод требует асинхронного программирования |
| Предварительный просмотр (PreviewElement: HTMLDEVELEMENT, Markdown: String, Options?: iPreviewoptions) | Рендеринг статьи на странице. |
| Highlightrender (hljsoption?: ihljs, element?: htmlelement | документ, cdn = options.cdn) | Выделите рендеринг кодовых блоков в элементе |
| Mediarender (элемент: htmlelement) | Рендеринг как видео, аудио и встроенные iframes для конкретных ссылок |
| Mathrender (элемент: htmlelement, options?: {cdn?: string, math?: imath}) | Рендеринг математических формул |
| Speechrender (элемент: htmlelement, lang?: (Keyof ii18nlang)) | Прочитайте выбранный текст |
| graphvizrender (элемент: htmlelement, cdn?: string) | Рендеринг граф |
| OutlineRender (ContentEdement: HtmLelement, TargetElement: Element) | Представить контур |
| LazyLoadImagerender (элемент: (htmLelement | document) = документ) | Рендеринг изображений с включенной ленивой загрузкой |
| SetCodetheme (CodeTheme: String, CDN = Options.cdn) | Установите тему кода, см. Options.preview.hljs.style для Codetheme |
| SetContentTheme (ContentTheme: String, Path: String) | Установите тему контента, см. Options.preview.theme.list для ContentTeme. |
npm install из корневого каталогаnpm run start начала начала для запуска локального сервера и откройте http: // localhost: 9000npm run build для Dist DisterВ связи с использованием механизма загрузки по требованию, CDN по умолчанию-https://unpkg.com/vditor@ Номер версии.
Если код изменен или вам нужно использовать само построенный CDN, вы можете выполнить следующие шаги:
cdn , emojiPath и themes в options и IPreviewOptionshighlightRender , mathRender , abcRender , chartRender , mermaidRender , SMILESRender , markmapRender , flowchartRender , mindmapRender , plantumlRender , graphvizRender , setCodeTheme , setContentTheme Методы должны добавить параметры CDN.Пожалуйста, внимательно прочитайте часть обновления в Changelog.
Vditor использует протокол MIT с открытым исходным кодом.
В первые дни разработки SYM мы напрямую использовали богатый текстовый редактор Wysiwyg. В то время редакторы на основе HTML были очень популярны, и им было очень удобно цитировать в проектах, и в то время они также соответствовали привычкам использования пользователя.
Позже, рост отметки постепенно изменил макет всех. Кроме того, некоторые из наших других проектов предназначены для программистов, поэтому миграция в MD также является общей тенденцией. Мы выбрали Codemirror, отличный редактор, который предоставляет разработчикам богатые интерфейсы программирования, а также более совместим с различными браузерами.
Позже, поскольку наш проект нуждается в урегулировании, использование Codemirror иногда чувствует себя «громоздким». Например, для достижения @automaty завершить список имен пользователя, вставить эмодзи, загрузить файлы и т. Д., Это требует относительно глубокого вторичного развития, и эти потребности бизнеса являются именно тем, что многие проектные сценарии имеют и необходимы.
Наконец, мы решили начать реализацию редактора сами в Sym. С несколькими версионными итерациями редактор SYM становится все более и более зрелым. В цепочке сообщества, которые мы работаем, некоторые люди спрашивали нас, можем ли мы снять редактор отдельно и предоставить его всем для использования. В то же время наш фронт-эндовый основной программу V-класса V был немного ошеломлен в поддержании редакторов, разбросанных в различных проектах, а также имел хорошее впечатление от TypeScript, поэтому мы решили использовать TS для реализации совершенно нового редактора MD на стороне браузера.
Итак, родился Vditor.
