[{"data":1,"prerenderedAt":339},["ShallowReactive",2],{"docs:\u002Fen\u002Fdocs\u002Fguides\u002Fimages":3},{"id":4,"title":5,"body":6,"description":329,"extension":330,"meta":331,"navigation":334,"path":335,"seo":336,"stem":337,"__hash__":338},"docs_en\u002Fen\u002Fdocs\u002Fguides\u002Fimages.md","Images and uploads",{"type":7,"value":8,"toc":323},"minimark",[9,14,18,22,30,33,37,40,44,58,109,319],[10,11,13],"h2",{"id":12},"insert-by-address","Insert by address",[15,16,17],"p",{},"Use the image tool or insertImage with ImageAttributes. Addresses, dimensions and attributes are validated; unsupported\u002Fdangerous URLs are not accepted. Images entered by URL can request that external server. The editor does not provide a media backend.",[10,19,21],{"id":20},"upload-a-file","Upload a file",[15,23,24,25,29],{},"In the builder preview, the image dialog lets you choose a file. It is read locally and embedded in HTML as a data URL; the website does not receive the file. To upload and store images separately in your own application, provide an ",[26,27,28],"code",{},"uploadImage"," callback returning a persistent URL. Without this callback, the dialog only offers an image address.",[15,31,32],{},"Supply uploadImage in the constructor. Your application uploads a PNG\u002FJPEG\u002FGIF\u002FWebP file and resolves with supported image attributes. The callback receives an AbortSignal. Keep authorization and storage policy in the application; do not embed service keys in the browser.",[10,34,36],{"id":35},"cancellation-and-revisions","Cancellation and revisions",[15,38,39],{},"Uploading captures the insertion range. A changed document revision can reject a stale result. Abort, failure and stale-document errors must be handled without silently overwriting later edits. Upload is not available simply because the image URL tool exists.",[10,41,43],{"id":42},"presets","Presets",[15,45,46,47,52,53,57],{},"Images are disabled in Simple, available in Base\u002FPro and selectable in the builder. Image metadata dialogs and drag-based resizing are not implemented. ",[48,49,51],"a",{"href":50},"\u002Fen\u002Fdocs\u002Freference\u002Fsecurity","Security",", ",[48,54,56],{"href":55},"\u002Fen\u002Fdocs\u002Freference\u002Ferrors","errors",".",[59,60,65],"pre",{"className":61,"code":62,"language":63,"meta":64,"style":64},"language-ts shiki shiki-themes github-dark","editor.insertImage({ src: '\u002Fuploads\u002Fpicture.png', alt: 'Описание', width: 640, height: 480 });\n","ts","",[26,66,67],{"__ignoreMap":64},[68,69,72,76,80,83,87,90,93,96,100,103,106],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"s95oV","editor.",[68,77,79],{"class":78},"svObZ","insertImage",[68,81,82],{"class":74},"({ src: ",[68,84,86],{"class":85},"sU2Wk","'\u002Fuploads\u002Fpicture.png'",[68,88,89],{"class":74},", alt: ",[68,91,92],{"class":85},"'Описание'",[68,94,95],{"class":74},", width: ",[68,97,99],{"class":98},"sDLfK","640",[68,101,102],{"class":74},", height: ",[68,104,105],{"class":98},"480",[68,107,108],{"class":74}," });\n",[59,110,112],{"className":61,"code":111,"language":63,"meta":64,"style":64},"const editor = new ViText('#editor', {\n  preset: 'base',\n  uploadImage: async (file, { signal }) => {\n    const body = new FormData(); body.append('image', file);\n    const response = await fetch('\u002Fapi\u002Fimages', { method: 'POST', body, signal });\n    if (!response.ok) throw new Error('Загрузка не выполнена');\n    const result = await response.json();\n    return { src: result.url, alt: file.name };\n  }\n});\n",[26,113,114,141,153,187,217,247,277,298,307,313],{"__ignoreMap":64},[68,115,116,120,123,126,129,132,135,138],{"class":70,"line":71},[68,117,119],{"class":118},"snl16","const",[68,121,122],{"class":98}," editor",[68,124,125],{"class":118}," =",[68,127,128],{"class":118}," new",[68,130,131],{"class":78}," ViText",[68,133,134],{"class":74},"(",[68,136,137],{"class":85},"'#editor'",[68,139,140],{"class":74},", {\n",[68,142,144,147,150],{"class":70,"line":143},2,[68,145,146],{"class":74},"  preset: ",[68,148,149],{"class":85},"'base'",[68,151,152],{"class":74},",\n",[68,154,156,159,162,165,168,172,175,178,181,184],{"class":70,"line":155},3,[68,157,158],{"class":78},"  uploadImage",[68,160,161],{"class":74},": ",[68,163,164],{"class":118},"async",[68,166,167],{"class":74}," (",[68,169,171],{"class":170},"s9osk","file",[68,173,174],{"class":74},", { ",[68,176,177],{"class":170},"signal",[68,179,180],{"class":74}," }) ",[68,182,183],{"class":118},"=>",[68,185,186],{"class":74}," {\n",[68,188,190,193,196,198,200,203,206,209,211,214],{"class":70,"line":189},4,[68,191,192],{"class":118},"    const",[68,194,195],{"class":98}," body",[68,197,125],{"class":118},[68,199,128],{"class":118},[68,201,202],{"class":78}," FormData",[68,204,205],{"class":74},"(); body.",[68,207,208],{"class":78},"append",[68,210,134],{"class":74},[68,212,213],{"class":85},"'image'",[68,215,216],{"class":74},", file);\n",[68,218,220,222,225,227,230,233,235,238,241,244],{"class":70,"line":219},5,[68,221,192],{"class":118},[68,223,224],{"class":98}," response",[68,226,125],{"class":118},[68,228,229],{"class":118}," await",[68,231,232],{"class":78}," fetch",[68,234,134],{"class":74},[68,236,237],{"class":85},"'\u002Fapi\u002Fimages'",[68,239,240],{"class":74},", { method: ",[68,242,243],{"class":85},"'POST'",[68,245,246],{"class":74},", body, signal });\n",[68,248,250,253,255,258,261,264,266,269,271,274],{"class":70,"line":249},6,[68,251,252],{"class":118},"    if",[68,254,167],{"class":74},[68,256,257],{"class":118},"!",[68,259,260],{"class":74},"response.ok) ",[68,262,263],{"class":118},"throw",[68,265,128],{"class":118},[68,267,268],{"class":78}," Error",[68,270,134],{"class":74},[68,272,273],{"class":85},"'Загрузка не выполнена'",[68,275,276],{"class":74},");\n",[68,278,280,282,285,287,289,292,295],{"class":70,"line":279},7,[68,281,192],{"class":118},[68,283,284],{"class":98}," result",[68,286,125],{"class":118},[68,288,229],{"class":118},[68,290,291],{"class":74}," response.",[68,293,294],{"class":78},"json",[68,296,297],{"class":74},"();\n",[68,299,301,304],{"class":70,"line":300},8,[68,302,303],{"class":118},"    return",[68,305,306],{"class":74}," { src: result.url, alt: file.name };\n",[68,308,310],{"class":70,"line":309},9,[68,311,312],{"class":74},"  }\n",[68,314,316],{"class":70,"line":315},10,[68,317,318],{"class":74},"});\n",[320,321,322],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":64,"searchDepth":143,"depth":143,"links":324},[325,326,327,328],{"id":12,"depth":143,"text":13},{"id":20,"depth":143,"text":21},{"id":35,"depth":143,"text":36},{"id":42,"depth":143,"text":43},"Checked addresses and an application-owned upload callback.","md",{"group":332,"order":333},"Document guides",24,true,"\u002Fen\u002Fdocs\u002Fguides\u002Fimages",{"title":5,"description":329},"en\u002Fdocs\u002Fguides\u002Fimages","bEwhLwT-uPnqEhLsBGpO6JFWr25GEyWfxRWHtXRiiuE",1792670389499]