8
0
فهرست منبع

Docs: Enhanced the comprehensive image upload guide.

Aleksander Nowodzinski 7 سال پیش
والد
کامیت
0cd6379e4a
2فایلهای تغییر یافته به همراه122 افزوده شده و 7 حذف شده
  1. 113 0
      docs/assets/img/image-upload-animation.svg
  2. 9 7
      docs/features/image-upload.md

+ 113 - 0
docs/assets/img/image-upload-animation.svg

@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="230px" height="130px" viewBox="0 0 230 130" opacity="1">
+    <style>
+@keyframes a0_f { 0% { fill: #f9f9f9; } 0.1848% { fill: #f9f9f9; animation-timing-function: cubic-bezier(0,0,1,1); } 100% { fill: #f9f9f9; } }
+@keyframes info-text_t { 0% { transform: translate(141.5px,42px); } 24.9537% { transform: translate(141.5px,42px); animation-timing-function: cubic-bezier(0.42,0,1,1); } 29.5748% { transform: translate(141.5px,52px); } 100% { transform: translate(141.5px,52px); } }
+@keyframes info-text_o { 0% { opacity: 1; } 24.9538% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,1,1); } 29.5749% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes a1_t { 0% { transform: scale(1,1); } 9.6118% { transform: scale(1,1); } 11.0905% { transform: scale(1.12,1.12); animation-timing-function: cubic-bezier(0,0,1,1); } 18.1146% { transform: scale(1.12,1.12); } 100% { transform: scale(1.12,1.12); } }
+@keyframes photo-file_t { 0% { transform: translate(-9.5px,-11.205px); } 11.0905% { transform: translate(-9.5px,-11.205px); } 18.1146% { transform: translate(-9.5px,-11.205px); } 100% { transform: translate(-9.5px,-11.205px); } }
+@keyframes photo-file_o { 0% { opacity: 1; } 23.6599% { opacity: 1; } 26.2477% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes photo-file_mo { 0% { offset-distance: 0%; } 11.0906% { offset-distance: 0%; animation-timing-function: cubic-bezier(0.42,0,1,1); } 18.1146% { offset-distance: 100%; } 100% { offset-distance: 100%; } }
+@keyframes file_1_txt-2_o { 0% { opacity: 1; } 11.0906% { opacity: 1; } 13.3087% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes cursor_o { 0% { opacity: 0; } 5.1756% { opacity: 1; } 18.1146% { opacity: 1; } 23.6599% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes cursor_mo { 0% { offset-distance: 0%; animation-timing-function: cubic-bezier(0.42,0,1,1); } 11.0906% { offset-distance: 25.695%; animation-timing-function: cubic-bezier(0.42,0,1,1); } 18.1146% { offset-distance: 100%; } 100% { offset-distance: 100%; } }
+@keyframes photo-main_o { 0% { opacity: 0; } 26.4325% { opacity: 0; animation-timing-function: cubic-bezier(0.42,0,1,1); } 29.7597% { opacity: 0.2; } 62.8466% { opacity: 0.2; } 66.5434% { opacity: 1; } 100% { opacity: 1; } }
+@keyframes photo-box_t { 0% { transform: translate(139px,44px); } 69.8706% { transform: translate(139px,44px); } 75.4158% { transform: translate(139px,39px); } 100% { transform: translate(139px,39px); } }
+@keyframes photo-box_o { 0% { opacity: 0; } 69.8706% { opacity: 0; } 75.4159% { opacity: 1; } 100% { opacity: 1; } }
+@keyframes info-1_t { 0% { transform: translate(140px,68px); } 72.6432% { transform: translate(140px,68px); } 78.1885% { transform: translate(140px,63px); } 100% { transform: translate(140px,63px); } }
+@keyframes info-1_o { 0% { opacity: 0; } 72.6433% { opacity: 0; } 78.1885% { opacity: 1; } 100% { opacity: 1; } }
+@keyframes info-2_t { 0% { transform: translate(140px,79px); } 75.4158% { transform: translate(140px,79px); } 80.9611% { transform: translate(140px,74px); } 100% { transform: translate(140px,74px); } }
+@keyframes info-2_o { 0% { opacity: 0; } 75.4159% { opacity: 0; } 80.9612% { opacity: 1; } 100% { opacity: 1; } }
+@keyframes info-3_t { 0% { transform: translate(140px,90px); } 78.5582% { transform: translate(140px,90px); } 84.1035% { transform: translate(140px,85px); } 100% { transform: translate(140px,85px); } }
+@keyframes info-3_o { 0% { opacity: 0; } 78.5582% { opacity: 0; } 84.1035% { opacity: 1; } 100% { opacity: 1; } }
+@keyframes loading_t { 0% { transform: translate(28px,66px); } 35.8595% { transform: translate(28px,66px); } 100% { transform: translate(28px,66px); } }
+@keyframes loading_o { 0% { opacity: 0; } 33.6414% { opacity: 0; } 35.8595% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,1,1); } 51.0166% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,1,1); } 55.4529% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes loading_w { 0% { width: 2px; } 33.6414% { width: 2px; } 35.8595% { width: 2px; animation-timing-function: cubic-bezier(0.42,0,1,1); } 51.0166% { width: 98px; } 100% { width: 98px; } }
+@keyframes check_t { 0% { transform: translate(125px,67px) scale(2,2) translate(-3px,-3px); } 55.4528% { transform: translate(125px,67px) scale(2,2) translate(-3px,-3px); animation-timing-function: cubic-bezier(0.42,0,1,1); } 59.5194% { transform: translate(125px,67px) scale(1,1) translate(-3px,-3px); } 100% { transform: translate(125px,67px) scale(1,1) translate(-3px,-3px); } }
+@keyframes check_o { 0% { opacity: 0; } 55.4529% { opacity: 0; animation-timing-function: cubic-bezier(0.42,0,1,1); } 59.5194% { opacity: 1; } 70.9797% { opacity: 1; } 74.122% { opacity: 0; } 100% { opacity: 0; } }
+    </style>
+    <title>Artboard-1</title>
+    <desc>Created with Sketch.</desc>
+    <g id="background" fill-rule="nonzero" stroke="none" stroke-width="1" fill="none" transform="translate(10,10)">
+        <g id="window">
+            <rect id="Rectangle" stroke="#DDDDDD" fill="#FFFFFF" width="173" height="104" transform="translate(0,0) translate(0.5,0.5)"></rect>
+            <rect id="Rectangle-4" stroke="#DDDDDD" fill="#DDDDDD" width="173" height="12" transform="translate(0,0) translate(0.5,0.5)"></rect>
+            <ellipse id="Oval" fill="#BCBCBC" rx="2.5" ry="2.5" transform="translate(0,0) translate(8.5,6.5)"></ellipse>
+            <ellipse id="Oval-2" fill="#BCBCBC" rx="2.5" ry="2.5" transform="translate(0,0) translate(15.5,6.5)"></ellipse>
+            <ellipse id="Oval-3" fill="#BCBCBC" rx="2.5" ry="2.5" transform="translate(0,0) translate(22.5,6.5)"></ellipse>
+        </g>
+        <g id="editor" stroke="#DDDDDD" transform="translate(13,26)">
+            <rect id="Rectangle-5" fill="#FFFFFF" width="107" height="64" transform="translate(0,0) translate(0.5,0.5)"></rect>
+            <rect id="Rectangle-6" fill="#FFFFFF" width="107" height="54" transform="translate(0,0) translate(0.5,10.5)"></rect>
+            <path id="Line" d="M7,6L11,6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path id="Line-2" d="M15,6L19,6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path id="Line-3" d="M23,6L27,6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path id="Line-4" d="M31,6L35,6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path id="Line-5" d="M7,19L100,19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path id="Line-6" d="M7,24L88,24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        </g>
+        <rect id="info" fill="#DDDDDD" width="39" height="65" transform="translate(0,0) translate(126,26)"></rect>
+    </g>
+    <g id="info-text" fill-rule="nonzero" stroke="#BCBCBC" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="none" opacity="1" transform="translate(141.5,42)" style="animation: info-text_t 9.017s linear infinite both, info-text_o 9.017s linear infinite both;">
+        <path id="Line-7" d="M0,1L28,1"></path>
+        <path id="Line-8" d="M0,6L28,6"></path>
+        <path id="Line-9" d="M0,11L28,11"></path>
+        <path id="Line-10" d="M0,16L23,16"></path>
+    </g>
+    <g id="photo-file-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(200,80)">
+        <path id="file_1_txt" d="M0,22.25L19,22.25" stroke="#DDDDDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero"></path>
+        <g id="file_1" transform="translate(1,0)">
+            <path id="Rectangle-2" fill="#FFFFFF" fill-rule="nonzero" d="M1,1L10.8838,1L15,4.9668L15,17L1,17Z"></path>
+            <path id="Shape" d="M15.4995,4.136L11.9877,0.728C11.7672,0.380865,11.3808,0.16687,10.9621,0.16L1.52615,0.16C0.846419,0.16,0.295385,0.697258,0.295385,1.36L0.295385,16.56C0.295385,17.2227,0.846419,17.76,1.52615,17.76L14.6544,17.76C14.9934,17.8075,15.3356,17.6965,15.5778,17.4603C15.82,17.2242,15.9338,16.8906,15.8851,16.56L15.8851,5.36C15.9168,4.91948,15.7793,4.48323,15.4995,4.136L15.4995,4.136ZM12.1928,2.608L13.7846,4.16L12.1928,4.16L12.1928,2.608ZM10.921,1.36L10.921,1.384L10.9456,1.408L10.9456,5.36L14.6379,5.36L14.6379,9.64L12.48,8.44C12.2284,8.29984,11.9106,8.34982,11.7169,8.56L8.29949,12.24L5.42769,11.2C5.20212,11.1193,4.94899,11.1739,4.77949,11.34L1.52205,14.516L1.52205,1.36L10.921,1.36ZM1.52615,16.56L1.52615,16.2L1.55077,16.2L5.37436,12.472L8.28308,13.52C8.51859,13.6046,8.78321,13.5413,8.95179,13.36L12.3159,9.736L14.6544,11.04L14.6544,16.56L1.52615,16.56Z" fill="#BCBCBC"></path>
+            <path id="Shape-2" d="M5.22256,8.56C6.35546,8.56,7.27385,7.66457,7.27385,6.56C7.27385,5.45543,6.35546,4.56,5.22256,4.56C4.08967,4.56,3.17128,5.45543,3.17128,6.56C3.17128,7.66457,4.08967,8.56,5.22256,8.56L5.22256,8.56ZM5.22256,5.76C5.67572,5.76,6.04308,6.11817,6.04308,6.56C6.04308,7.00183,5.67572,7.36,5.22256,7.36C4.76941,7.36,4.40205,7.00183,4.40205,6.56C4.40205,6.11817,4.76941,5.76,5.22256,5.76Z" fill="#BCBCBC"></path>
+        </g>
+    </g>
+    <g id="photo-file" style="animation: a1_t 9.017s linear infinite both ,photo-file_mo 9.017s linear infinite both; offset-path: path('M209.5,61.205L209.5,61.205C165.469,60.6972,122.131,67.7722,79.4551,82.0677L79.4551,82.0677'); offset-rotate: 0deg;">
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1" transform=" translate(-9.5,-11.205)" style="animation: photo-file_t 9.017s linear infinite both, photo-file_o 9.017s linear infinite both;">
+            <path id="file_1_txt-2" d="M0,22.25L19,22.25" stroke="#DDDDDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" opacity="1" style="animation: file_1_txt-2_o 9.017s linear infinite both;"></path>
+            <g id="file_1-2" transform="translate(1,0)">
+                <path id="Rectangle-2-2" fill="#FFFFFF" fill-rule="nonzero" d="M1,1L10.8838,1L15,4.9668L15,17L1,17Z"></path>
+                <path id="Shape-3" d="M15.4995,4.136L11.9877,0.728C11.7672,0.380865,11.3808,0.16687,10.9621,0.16L1.52615,0.16C0.846419,0.16,0.295385,0.697258,0.295385,1.36L0.295385,16.56C0.295385,17.2227,0.846419,17.76,1.52615,17.76L14.6544,17.76C14.9934,17.8075,15.3356,17.6965,15.5778,17.4603C15.82,17.2242,15.9338,16.8906,15.8851,16.56L15.8851,5.36C15.9168,4.91948,15.7793,4.48323,15.4995,4.136L15.4995,4.136ZM12.1928,2.608L13.7846,4.16L12.1928,4.16L12.1928,2.608ZM10.921,1.36L10.921,1.384L10.9456,1.408L10.9456,5.36L14.6379,5.36L14.6379,9.64L12.48,8.44C12.2284,8.29984,11.9106,8.34982,11.7169,8.56L8.29949,12.24L5.42769,11.2C5.20212,11.1193,4.94899,11.1739,4.77949,11.34L1.52205,14.516L1.52205,1.36L10.921,1.36ZM1.52615,16.56L1.52615,16.2L1.55077,16.2L5.37436,12.472L8.28308,13.52C8.51859,13.6046,8.78321,13.5413,8.95179,13.36L12.3159,9.736L14.6544,11.04L14.6544,16.56L1.52615,16.56Z" fill="#BCBCBC"></path>
+                <path id="Shape-4" d="M5.22256,8.56C6.35546,8.56,7.27385,7.66457,7.27385,6.56C7.27385,5.45543,6.35546,4.56,5.22256,4.56C4.08967,4.56,3.17128,5.45543,3.17128,6.56C3.17128,7.66457,4.08967,8.56,5.22256,8.56L5.22256,8.56ZM5.22256,5.76C5.67572,5.76,6.04308,6.11817,6.04308,6.56C6.04308,7.00183,5.67572,7.36,5.22256,7.36C4.76941,7.36,4.40205,7.00183,4.40205,6.56C4.40205,6.11817,4.76941,5.76,5.22256,5.76Z" fill="#BCBCBC"></path>
+            </g>
+        </g>
+    </g>
+    <g id="cursor" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" style="animation: cursor_o 9.017s linear infinite both, cursor_mo 9.017s linear infinite both; offset-path: path('M205,18L213,63C169,63.3804,125.652,70.3368,82.9551,83.8627L82.9551,83.8627'); offset-rotate: 0deg;">
+        <g id="Rectangle-237">
+            <path stroke-opacity="0.8" stroke="#FFFFFF" stroke-width="0.7" d="M5.99271,6.24868L8.17168,9.12618L6.60572,10.3885L4.43083,7.51638L2.3803,10.7049L-0.543274,-0.710555L9.47456,4.97196L5.99271,6.24868Z" fill="#363B3E" fill-rule="evenodd"></path>
+        </g>
+    </g>
+    <g id="photo-main" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" transform="translate(28,66)" style="animation: photo-main_o 9.017s linear infinite both;">
+        <rect id="Rectangle-7" fill="#EAEAEA" width="98" height="30"></rect>
+        <g id="icon---image" fill="#AEAEAE" transform="translate(40,10)">
+            <path id="Shape-5" d="M17.8008,10.1437L13.2697,5.16338C13.1203,5.00563,12.8963,4.89296,12.6224,4.89296C12.3734,4.89296,12.1245,5.00563,11.9751,5.16338L11.3776,5.8169C11.3527,5.83944,11.3278,5.88451,11.3029,5.90704C11.1535,6.04225,10.9544,6.13239,10.7303,6.13239C10.5062,6.13239,10.332,6.06479,10.1826,5.92958C10.1328,5.88451,10.083,5.83944,10.0581,5.79437L7.84232,3.36056C7.64315,3.13521,7.3444,3,6.99585,3C6.6473,3,6.34855,3.13521,6.14938,3.36056L0.224066,9.87324L0.124481,9.98592C0.0497925,10.0986,0,10.2113,0,10.3465C0,10.707,0.323651,11,0.721992,11L0.721992,11L2.39004,11L2.93776,11L3.06224,11L7.86722,11L9.13693,11L9.56017,11L9.65975,11L13.2697,11L15.6598,11L15.7593,11L16.5311,11L17.4523,11C17.751,11,18,10.7746,18,10.5042C18,10.3915,17.9751,10.3014,17.9004,10.2113L17.8008,10.1437L17.8008,10.1437Z"></path>
+            <path id="Shape-6" d="M17,0C15.9041,0,15,0.90411,15,2C15,3.09589,15.9041,4,17,4C18.0959,4,19,3.09589,19,2C19,0.90411,18.0959,0,17,0L17,0Z"></path>
+        </g>
+    </g>
+    <g id="photo-box" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0" transform="translate(139,44)" style="animation: photo-box_t 9.017s linear infinite both, photo-box_o 9.017s linear infinite both;">
+        <rect id="Rectangle-8" fill="#BCBCBC" width="33" height="20"></rect>
+        <g id="icon---image-2" fill="#979494" transform="translate(12,7)">
+            <path id="Shape-7" d="M8.90041,5.57183L6.63485,3.08169C6.56017,3.00282,6.44813,2.94648,6.3112,2.94648C6.18672,2.94648,6.06224,3.00282,5.98755,3.08169L5.6888,3.40845C5.67635,3.41972,5.6639,3.44225,5.65145,3.45352C5.57676,3.52113,5.47718,3.5662,5.36515,3.5662C5.25311,3.5662,5.16598,3.53239,5.09129,3.46479C5.06639,3.44225,5.04149,3.41972,5.02905,3.39718L3.92116,2.18028C3.82158,2.06761,3.6722,2,3.49793,2C3.32365,2,3.17427,2.06761,3.07469,2.18028L0.112033,5.43662L0.0622407,5.49296C0.0248963,5.5493,0,5.60563,0,5.67324C0,5.85352,0.161826,6,0.360996,6L0.360996,6L1.19502,6L1.46888,6L1.53112,6L3.93361,6L4.56846,6L4.78008,6L4.82988,6L6.63485,6L7.82988,6L7.87967,6L8.26556,6L8.72614,6C8.87552,6,9,5.88732,9,5.75211C9,5.69577,8.98755,5.6507,8.95021,5.60563L8.90041,5.57183L8.90041,5.57183Z"></path>
+            <path id="Shape-8" d="M9,0C8.45205,0,8,0.452055,8,1C8,1.54795,8.45205,2,9,2C9.54795,2,10,1.54795,10,1C10,0.452055,9.54795,0,9,0L9,0Z"></path>
+        </g>
+    </g>
+    <g id="info-1" fill-rule="nonzero" stroke="none" stroke-width="1" fill="none" opacity="0" transform="translate(140,68)" style="animation: info-1_t 9.017s linear infinite both, info-1_o 9.017s linear infinite both;">
+        <path id="Line-11" d="M10,3L29,3" stroke="#BCBCBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path id="Line-12" d="M10,6L25,6" stroke="#BCBCBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <rect id="Rectangle-3" fill="#BCBCBC" width="7" height="9" rx="2"></rect>
+    </g>
+    <g id="info-2" fill-rule="nonzero" stroke="none" stroke-width="1" fill="none" opacity="0" transform="translate(140,79)" style="animation: info-2_t 9.017s linear infinite both, info-2_o 9.017s linear infinite both;">
+        <path id="Line-13" d="M10,3L29,3" stroke="#BCBCBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path id="Line-14" d="M10,6L25,6" stroke="#BCBCBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <rect id="Rectangle-3-2" fill="#BCBCBC" width="7" height="9" rx="2"></rect>
+    </g>
+    <g id="info-3" fill-rule="nonzero" stroke="none" stroke-width="1" fill="none" opacity="0" transform="translate(140,90)" style="animation: info-3_t 9.017s linear infinite both, info-3_o 9.017s linear infinite both;">
+        <path id="Line-15" d="M10,3L29,3" stroke="#BCBCBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path id="Line-16" d="M10,6L25,6" stroke="#BCBCBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <rect id="Rectangle-3-3" fill="#BCBCBC" width="7" height="9" rx="2"></rect>
+    </g>
+    <rect id="loading" fill="#17C119" fill-rule="nonzero" width="2" height="2" stroke="none" stroke-width="1" opacity="0" transform="translate(77,67) translate(-49,-1)" style="animation: loading_t 9.017s linear infinite both, loading_o 9.017s linear infinite both, loading_w 9.017s linear infinite both;"></rect>
+    <g id="check" fill-rule="nonzero" stroke="none" stroke-width="1" fill="none" opacity="0" transform="translate(125,67) scale(2,2) translate(-3,-3)" style="animation: check_t 9.017s linear infinite both, check_o 9.017s linear infinite both;">
+        <path id="checked" d="M3,0C1.34584,0,0,1.34584,0,3C0,4.65416,1.34584,6,3,6C4.65416,6,6,4.65416,6,3C6,1.34584,4.65416,0,3,0Z" fill="#17C119"></path>
+        <path id="Shape-9" d="M4.13277,2.05687L2.4742,3.53397L1.86899,2.98894C1.7843,2.91311,1.64844,2.91311,1.56374,2.98736C1.47905,3.06161,1.47905,3.18483,1.56198,3.26066L2.31892,3.94313C2.36127,3.98104,2.41597,4,2.47243,4C2.52713,4,2.58183,3.98104,2.62417,3.94313L4.43626,2.33017C4.52095,2.25434,4.52095,2.1327,4.43802,2.05687C4.35333,1.98104,4.21747,1.98104,4.13277,2.05687Z" stroke="#FFFFFF" stroke-width="0.2" fill="#FFFFFF"></path>
+    </g>
+</svg>

+ 9 - 7
docs/features/image-upload.md

@@ -6,22 +6,24 @@ category: features
 
 Inserting images into content created with CKEditor is a very common task. In a properly configured editor, there are several ways for the end user to insert images:
 
-* Pasting it from the clipboard.
-* Dragging a file from the file system.
-* Selecting it through a file system dialog.
-* Selecting it from a media management tool in your application.
+* **Pasting** it from the clipboard.
+* **Dragging** a file from the file system.
+* Selecting it through a **file system dialog**.
+* Selecting it from a **media management tool** in your application.
 
 Excluding the last option, all other ways require the image to be uploaded to a server which will be the one responsible for providing the image URL used by CKEditor to display the image in the document.
 
-<info-box>
-	If you want to get a better look under the hood and learn more about the upload process, you can check out the {@link framework/guides/deep-dive/upload-adapter "Custom upload adpter" deep dive guide} covering that topic.
-</info-box>
+{@img assets/img/image-upload-animation.svg 650 The visualization of the image upload process.}
 
 The software that makes the image upload possible is called an **upload adapter**. It is a callback which tells the editor how to send the file to the server. There are two main strategies of getting the image upload work you can adopt in your project:
 
 * [**Official upload adapters**](#official-upload-adapters): There are several features providing upload adapters developed and maintained by the CKEditor team. Pick the best one for your integration and let it handle the image upload in your project.
 * [**Custom upload adapters**](#implementing-your-own-upload-adapter): Create your own upload adapter from scratch using the open API architecture CKEditor 5 provides.
 
+<info-box>
+	If you want to get a better look under the hood and learn more about the upload process, you can check out the {@link framework/guides/deep-dive/upload-adapter deep dive guide} covering that topic.
+</info-box>
+
 ## Official upload adapters
 
 ### Easy Image