[{"data":1,"prerenderedAt":508},["ShallowReactive",2],{"docs:\u002Fen\u002Fdocs\u002Fgetting-started":3},{"id":4,"title":5,"body":6,"description":499,"extension":500,"meta":501,"navigation":503,"path":504,"seo":505,"stem":506,"__hash__":507},"docs_en\u002Fen\u002Fdocs\u002Fgetting-started.md","Quick start",{"type":7,"value":8,"toc":493},"minimark",[9,13,18,41,60,63,79,86,90,100,104,115,119,136,309,402,489],[10,11,12],"p",{},"ViText is a content editor: you format text visually (WYSIWYG), and your application receives HTML. Community is available under MIT; basic editing requires no React, Vue or ViText server. This quick start uses the ready-to-use browser distribution.",[14,15,17],"h2",{"id":16},"prepare-your-environment","Prepare your environment",[10,19,20,25,26,30,31,35,36,40],{},[21,22,24],"a",{"href":23},"\u002Fdownloads\u002Fvitext-community-1.0.0-beta.6.zip","Download the ViText Community browser build"," and extract the entire archive. Use the ",[21,27,29],{"href":28},"\u002Fdownloads\u002Fvitext-community-1.0.0-beta.6.zip.sha256","SHA256 checksum"," to verify the file. Browser integration requires no GitHub access, npm or bundler; ESM is available via ",[32,33,34],"code",{},"npm install @vitext-ru\u002Feditor@beta"," (",[21,37,39],{"href":38},"\u002Fen\u002Fdocs\u002Finstallation\u002Fesm","guide",").",[10,42,43,44,47,48,51,52,55,56,59],{},"The archive contains ",[32,45,46],{},"vitext\u002F"," with four browser resources, ",[32,49,50],{},"example\u002Findex.html",", RU\u002FEN guides, LICENSE and THIRD_PARTY_NOTICES.md. Serve the extracted folder over HTTP\u002FHTTPS and open ",[32,53,54],{},"example\u002Findex.html?lang=en",". Opening via ",[32,57,58],{},"file:\u002F\u002F"," is not supported.",[10,61,62],{},"If Python 3 is installed, run this from the extracted folder:",[64,65,70],"pre",{"className":66,"code":67,"language":68,"meta":69,"style":69},"language-sh shiki shiki-themes github-dark","python3 -m http.server 8080 --bind 127.0.0.1\n","sh","",[32,71,72],{"__ignoreMap":69},[73,74,77],"span",{"class":75,"line":76},"line",1,[73,78,67],{},[10,80,81,82,85],{},"Open ",[32,83,84],{},"http:\u002F\u002F127.0.0.1:8080\u002Fexample\u002Findex.html?lang=en",".",[14,87,89],{"id":88},"connect-the-editor","Connect the editor",[10,91,92,93,95,96,99],{},"Copy the entire ",[32,94,46],{}," folder into your application's static assets. The snippet below uses ",[32,97,98],{},"\u002Fvitext\u002F",". Preserve LICENSE and THIRD_PARTY_NOTICES.md when redistributing. Keep source.js and codecs.js next to the main file so HTML\u002FCSS and Markdown work.",[14,101,103],{"id":102},"apply-markdown-and-read-html","Apply Markdown and read HTML",[10,105,106,107,110,111,114],{},"Create the instance, await Markdown import, then read ",[32,108,109],{},"getHTML()",". HTML\u002FJSON without CSS are applied immediately; initial Markdown\u002FCSS requires ",[32,112,113],{},"whenReady()",". Applied changes arrive through onChange. Your application persists JSON and CSS together; the editor does not save to a server.",[14,116,118],{"id":117},"clean-up","Clean up",[10,120,121,122,126,127,131,132,85],{},"Call destroy before unmounting. All Simple\u002FBase\u002FPro presets are part of Community; Pro here is not a paid plan. The library has no required UI framework or server. See ",[21,123,125],{"href":124},"\u002Fen\u002Fdocs\u002Finstallation\u002Fscript","script integration",", ",[21,128,130],{"href":129},"\u002Fen\u002Fdocs\u002Fguides\u002Fstorage","storage"," and ",[21,133,135],{"href":134},"\u002Fen\u002Fexamples","working examples",[64,137,141],{"className":138,"code":139,"language":140,"meta":69,"style":69},"language-html shiki shiki-themes github-dark","\u003Clink rel=\"stylesheet\" href=\"\u002Fvitext\u002Fvitext.css\">\n\u003Cdiv id=\"editor\">\u003C\u002Fdiv>\n\u003Cscript src=\"\u002Fvitext\u002Fvitext.iife.js\">\u003C\u002Fscript>\n\u003Cscript>\n  const editor = new ViText.ViText('#editor', {\n    preset: 'pro',\n    language: 'en',\n    content: '\u003Cp>Your first document\u003C\u002Fp>'\n  });\n\u003C\u002Fscript>\n","html",[32,142,143,175,198,220,229,261,273,284,293,299],{"__ignoreMap":69},[73,144,145,149,153,157,160,164,167,169,172],{"class":75,"line":76},[73,146,148],{"class":147},"s95oV","\u003C",[73,150,152],{"class":151},"s4JwU","link",[73,154,156],{"class":155},"svObZ"," rel",[73,158,159],{"class":147},"=",[73,161,163],{"class":162},"sU2Wk","\"stylesheet\"",[73,165,166],{"class":155}," href",[73,168,159],{"class":147},[73,170,171],{"class":162},"\"\u002Fvitext\u002Fvitext.css\"",[73,173,174],{"class":147},">\n",[73,176,178,180,183,186,188,191,194,196],{"class":75,"line":177},2,[73,179,148],{"class":147},[73,181,182],{"class":151},"div",[73,184,185],{"class":155}," id",[73,187,159],{"class":147},[73,189,190],{"class":162},"\"editor\"",[73,192,193],{"class":147},">\u003C\u002F",[73,195,182],{"class":151},[73,197,174],{"class":147},[73,199,201,203,206,209,211,214,216,218],{"class":75,"line":200},3,[73,202,148],{"class":147},[73,204,205],{"class":151},"script",[73,207,208],{"class":155}," src",[73,210,159],{"class":147},[73,212,213],{"class":162},"\"\u002Fvitext\u002Fvitext.iife.js\"",[73,215,193],{"class":147},[73,217,205],{"class":151},[73,219,174],{"class":147},[73,221,223,225,227],{"class":75,"line":222},4,[73,224,148],{"class":147},[73,226,205],{"class":151},[73,228,174],{"class":147},[73,230,232,236,240,243,246,249,252,255,258],{"class":75,"line":231},5,[73,233,235],{"class":234},"snl16","  const",[73,237,239],{"class":238},"sDLfK"," editor",[73,241,242],{"class":234}," =",[73,244,245],{"class":234}," new",[73,247,248],{"class":147}," ViText.",[73,250,251],{"class":155},"ViText",[73,253,254],{"class":147},"(",[73,256,257],{"class":162},"'#editor'",[73,259,260],{"class":147},", {\n",[73,262,264,267,270],{"class":75,"line":263},6,[73,265,266],{"class":147},"    preset: ",[73,268,269],{"class":162},"'pro'",[73,271,272],{"class":147},",\n",[73,274,276,279,282],{"class":75,"line":275},7,[73,277,278],{"class":147},"    language: ",[73,280,281],{"class":162},"'en'",[73,283,272],{"class":147},[73,285,287,290],{"class":75,"line":286},8,[73,288,289],{"class":147},"    content: ",[73,291,292],{"class":162},"'\u003Cp>Your first document\u003C\u002Fp>'\n",[73,294,296],{"class":75,"line":295},9,[73,297,298],{"class":147},"  });\n",[73,300,302,305,307],{"class":75,"line":301},10,[73,303,304],{"class":147},"\u003C\u002F",[73,306,205],{"class":151},[73,308,174],{"class":147},[64,310,314],{"className":311,"code":312,"language":313,"meta":69,"style":69},"language-js shiki shiki-themes github-dark","async function importMarkdown() {\n  await editor.setContent('# Hello\\n\\n**Text** from Markdown', {\n    format: 'markdown'\n  });\n  console.log(editor.getHTML());\n}\nimportMarkdown().catch(console.error);\n","js",[32,315,316,330,354,362,366,383,388],{"__ignoreMap":69},[73,317,318,321,324,327],{"class":75,"line":76},[73,319,320],{"class":234},"async",[73,322,323],{"class":234}," function",[73,325,326],{"class":155}," importMarkdown",[73,328,329],{"class":147},"() {\n",[73,331,332,335,338,341,343,346,349,352],{"class":75,"line":177},[73,333,334],{"class":234},"  await",[73,336,337],{"class":147}," editor.",[73,339,340],{"class":155},"setContent",[73,342,254],{"class":147},[73,344,345],{"class":162},"'# Hello",[73,347,348],{"class":238},"\\n\\n",[73,350,351],{"class":162},"**Text** from Markdown'",[73,353,260],{"class":147},[73,355,356,359],{"class":75,"line":200},[73,357,358],{"class":147},"    format: ",[73,360,361],{"class":162},"'markdown'\n",[73,363,364],{"class":75,"line":222},[73,365,298],{"class":147},[73,367,368,371,374,377,380],{"class":75,"line":231},[73,369,370],{"class":147},"  console.",[73,372,373],{"class":155},"log",[73,375,376],{"class":147},"(editor.",[73,378,379],{"class":155},"getHTML",[73,381,382],{"class":147},"());\n",[73,384,385],{"class":75,"line":263},[73,386,387],{"class":147},"}\n",[73,389,390,393,396,399],{"class":75,"line":275},[73,391,392],{"class":155},"importMarkdown",[73,394,395],{"class":147},"().",[73,397,398],{"class":155},"catch",[73,400,401],{"class":147},"(console.error);\n",[64,403,405],{"className":311,"code":404,"language":313,"meta":69,"style":69},"const unsubscribe = editor.on('change', ({ html, css, json, revision }) => {\n  console.log({ html, css, json, revision });\n});\nunsubscribe();\neditor.destroy();\n",[32,406,407,457,466,471,479],{"__ignoreMap":69},[73,408,409,412,415,417,419,422,424,427,430,433,435,438,440,443,445,448,451,454],{"class":75,"line":76},[73,410,411],{"class":234},"const",[73,413,414],{"class":238}," unsubscribe",[73,416,242],{"class":234},[73,418,337],{"class":147},[73,420,421],{"class":155},"on",[73,423,254],{"class":147},[73,425,426],{"class":162},"'change'",[73,428,429],{"class":147},", ({ ",[73,431,140],{"class":432},"s9osk",[73,434,126],{"class":147},[73,436,437],{"class":432},"css",[73,439,126],{"class":147},[73,441,442],{"class":432},"json",[73,444,126],{"class":147},[73,446,447],{"class":432},"revision",[73,449,450],{"class":147}," }) ",[73,452,453],{"class":234},"=>",[73,455,456],{"class":147}," {\n",[73,458,459,461,463],{"class":75,"line":177},[73,460,370],{"class":147},[73,462,373],{"class":155},[73,464,465],{"class":147},"({ html, css, json, revision });\n",[73,467,468],{"class":75,"line":200},[73,469,470],{"class":147},"});\n",[73,472,473,476],{"class":75,"line":222},[73,474,475],{"class":155},"unsubscribe",[73,477,478],{"class":147},"();\n",[73,480,481,484,487],{"class":75,"line":231},[73,482,483],{"class":147},"editor.",[73,485,486],{"class":155},"destroy",[73,488,478],{"class":147},[490,491,492],"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 .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":69,"searchDepth":177,"depth":177,"links":494},[495,496,497,498],{"id":16,"depth":177,"text":17},{"id":88,"depth":177,"text":89},{"id":102,"depth":177,"text":103},{"id":117,"depth":177,"text":118},"Add the ViText JavaScript WYSIWYG editor to a page without a bundler. Import Markdown, format text and export HTML.","md",{"group":502,"order":76},"Getting started",true,"\u002Fen\u002Fdocs\u002Fgetting-started",{"title":5,"description":499},"en\u002Fdocs\u002Fgetting-started","9sUr1ULYDA7T6VW1hWsr0d5gMpj_5HwdSSLa7rLegbw",1792670389489]