[{"data":1,"prerenderedAt":346},["ShallowReactive",2],{"docs:\u002Fdocs\u002Finstallation\u002Fesm":3},{"id":4,"title":5,"body":6,"description":338,"extension":339,"meta":340,"navigation":108,"path":342,"seo":343,"stem":344,"__hash__":345},"docs\u002Fdocs\u002Finstallation\u002Fesm.md","JavaScript-редактор через ESM",{"type":7,"value":8,"toc":334},"minimark",[9,13,27,32,39,55,66,210,224,228,231,318,330],[10,11,12],"p",{},"ESM-подключение позволяет использовать JavaScript-редактор ViText в приложении со сборщиком: импортировать класс, подключить стили и получить HTML из визуального документа.",[10,14,15,16,20,21,26],{},"Пакет ",[17,18,19],"code",{},"@vitext-ru\u002Feditor@1.0.0-beta.6"," опубликован в npm с ESM, TypeScript-типами и CSS. Ядро устанавливается автоматически. Для подключения без сборщика используйте ",[22,23,25],"a",{"href":24},"\u002Fdocs\u002Finstallation\u002Fscript","браузерный архив",".",[28,29,31],"h2",{"id":30},"установка","Установка",[10,33,34,35,38],{},"Установите предварительную версию с тегом ",[17,36,37],{},"beta",":",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-sh shiki shiki-themes github-dark","npm install @vitext-ru\u002Feditor@beta\n","sh","",[17,47,48],{"__ignoreMap":45},[49,50,53],"span",{"class":51,"line":52},"line",1,[49,54,43],{},[10,56,57,58,61,62,65],{},"Фиксированная версия: ",[17,59,60],{},"npm install @vitext-ru\u002Feditor@1.0.0-beta.6",". Добавьте ",[17,63,64],{},"\u003Cdiv id=\"editor\">\u003C\u002Fdiv>"," в HTML, затем импортируйте редактор и CSS:",[40,67,71],{"className":68,"code":69,"language":70,"meta":45,"style":45},"language-ts shiki shiki-themes github-dark","import ViText from '@vitext-ru\u002Feditor';\nimport '@vitext-ru\u002Feditor\u002Fstyle.css';\n\nconst editor = new ViText('#editor', {\n  content: '\u003Cp>Привет!\u003C\u002Fp>', language: 'ru', preset: 'pro'\n});\nawait editor.setContent('# Заголовок', { format: 'markdown' });\nconsole.log(editor.getHTML());\n","ts",[17,72,73,93,103,110,139,160,166,192],{"__ignoreMap":45},[49,74,75,79,83,86,90],{"class":51,"line":52},[49,76,78],{"class":77},"snl16","import",[49,80,82],{"class":81},"s95oV"," ViText ",[49,84,85],{"class":77},"from",[49,87,89],{"class":88},"sU2Wk"," '@vitext-ru\u002Feditor'",[49,91,92],{"class":81},";\n",[49,94,96,98,101],{"class":51,"line":95},2,[49,97,78],{"class":77},[49,99,100],{"class":88}," '@vitext-ru\u002Feditor\u002Fstyle.css'",[49,102,92],{"class":81},[49,104,106],{"class":51,"line":105},3,[49,107,109],{"emptyLinePlaceholder":108},true,"\n",[49,111,113,116,120,123,126,130,133,136],{"class":51,"line":112},4,[49,114,115],{"class":77},"const",[49,117,119],{"class":118},"sDLfK"," editor",[49,121,122],{"class":77}," =",[49,124,125],{"class":77}," new",[49,127,129],{"class":128},"svObZ"," ViText",[49,131,132],{"class":81},"(",[49,134,135],{"class":88},"'#editor'",[49,137,138],{"class":81},", {\n",[49,140,142,145,148,151,154,157],{"class":51,"line":141},5,[49,143,144],{"class":81},"  content: ",[49,146,147],{"class":88},"'\u003Cp>Привет!\u003C\u002Fp>'",[49,149,150],{"class":81},", language: ",[49,152,153],{"class":88},"'ru'",[49,155,156],{"class":81},", preset: ",[49,158,159],{"class":88},"'pro'\n",[49,161,163],{"class":51,"line":162},6,[49,164,165],{"class":81},"});\n",[49,167,169,172,175,178,180,183,186,189],{"class":51,"line":168},7,[49,170,171],{"class":77},"await",[49,173,174],{"class":81}," editor.",[49,176,177],{"class":128},"setContent",[49,179,132],{"class":81},[49,181,182],{"class":88},"'# Заголовок'",[49,184,185],{"class":81},", { format: ",[49,187,188],{"class":88},"'markdown'",[49,190,191],{"class":81}," });\n",[49,193,195,198,201,204,207],{"class":51,"line":194},8,[49,196,197],{"class":81},"console.",[49,199,200],{"class":128},"log",[49,202,203],{"class":81},"(editor.",[49,205,206],{"class":128},"getHTML",[49,208,209],{"class":81},"());\n",[10,211,212,213,216,217,220,221,26],{},"Сборщик приложения должен сохранять доступность ленивых ",[17,214,215],{},"source.js","\u002F",[17,218,219],{},"codecs.js",". Если размещаете их самостоятельно, передайте sourceModuleURL\u002FcodecsModuleURL из ",[22,222,223],{"href":24},"script-инструкции",[28,225,227],{"id":226},"только-в-браузере","Только в браузере",[10,229,230],{},"ViText работает с DOM. В SSR-приложении импортируйте и создавайте экземпляр после клиентского монтирования. Перед повторным монтированием уничтожайте прежний экземпляр. Nuxt\u002FVue являются технологией приложения, не требованием библиотеки.",[40,232,234],{"className":68,"code":233,"language":70,"meta":45,"style":45},"const host = document.querySelector\u003CHTMLElement>('#editor')!;\nconst editor = new ViText(host, { content: '\u003Cp>Документ\u003C\u002Fp>' });\nawait editor.whenReady();\n\u002F\u002F При уходе со страницы:\neditor.destroy();\n",[17,235,236,270,290,302,308],{"__ignoreMap":45},[49,237,238,240,243,245,248,251,254,257,260,262,265,268],{"class":51,"line":52},[49,239,115],{"class":77},[49,241,242],{"class":118}," host",[49,244,122],{"class":77},[49,246,247],{"class":81}," document.",[49,249,250],{"class":128},"querySelector",[49,252,253],{"class":81},"\u003C",[49,255,256],{"class":128},"HTMLElement",[49,258,259],{"class":81},">(",[49,261,135],{"class":88},[49,263,264],{"class":81},")",[49,266,267],{"class":77},"!",[49,269,92],{"class":81},[49,271,272,274,276,278,280,282,285,288],{"class":51,"line":95},[49,273,115],{"class":77},[49,275,119],{"class":118},[49,277,122],{"class":77},[49,279,125],{"class":77},[49,281,129],{"class":128},[49,283,284],{"class":81},"(host, { content: ",[49,286,287],{"class":88},"'\u003Cp>Документ\u003C\u002Fp>'",[49,289,191],{"class":81},[49,291,292,294,296,299],{"class":51,"line":105},[49,293,171],{"class":77},[49,295,174],{"class":81},[49,297,298],{"class":128},"whenReady",[49,300,301],{"class":81},"();\n",[49,303,304],{"class":51,"line":112},[49,305,307],{"class":306},"sAwPA","\u002F\u002F При уходе со страницы:\n",[49,309,310,313,316],{"class":51,"line":141},[49,311,312],{"class":81},"editor.",[49,314,315],{"class":128},"destroy",[49,317,301],{"class":81},[10,319,320,321,325,326,26],{},"При ошибке готовности обработайте исключение и сохраните доступ к исходным данным приложения. ",[22,322,324],{"href":323},"\u002Fdocs\u002Fguides\u002Flifecycle","Lifecycle",", ",[22,327,329],{"href":328},"\u002Fexamples\u002Fesm","пример ESM",[331,332,333],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":45,"searchDepth":95,"depth":95,"links":335},[336,337],{"id":30,"depth":95,"text":31},{"id":226,"depth":95,"text":227},"Установка JavaScript-редактора ViText из npm: импорт ESM и CSS, Markdown, HTML и уничтожение экземпляра.","md",{"group":341,"order":105},"Начало работы","\u002Fdocs\u002Finstallation\u002Fesm",{"title":5,"description":338},"docs\u002Finstallation\u002Fesm","TxyyWow1bzhyVOXziI7TUtTfufzQEe0NIPwyzSl9FcQ",1792670389278]