8
0
Просмотр исходного кода

Merge branch 'master' into t/1214

Kamil Piechaczek 7 лет назад
Родитель
Сommit
3db55d6df4

+ 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>

+ 1 - 3
docs/builds/guides/faq.md

@@ -78,9 +78,7 @@ By default, CKEditor 5 has no global registry of editor instances. But if necess
 
 ## How to enable image drag&drop and upload? Where should I start?
 
-The {@link features/image Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters ({@link features/image-upload#easy-image Easy Image} or {@link module:ckfinder/ckfinder~CKFinderConfig CKFinder adapter}) or {@link module:upload/filerepository~UploadAdapter implement and use your own upload adapter}.
-
-See the {@link features/image Image} and {@link features/image-upload Image upload} feature guides to learn more.
+The {@link features/image Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best image upload strategy for your project.
 
 ## How to use CKEditor 5 with frameworks (Angular, React, etc.)?
 

+ 1 - 1
docs/builds/guides/integration/configuration.md

@@ -94,7 +94,7 @@ class MyPlugin {
 }
 ```
 
-An example plugin that you may want to add this way is a {@link module:upload/filerepository~UploadAdapter custom upload adapter}.
+An example plugin that you may want to add this way is a {@link framework/guides/deep-dive/upload-adapter custom upload adapter}.
 
 ```js
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

+ 2 - 5
docs/builds/guides/migrate.md

@@ -35,9 +35,7 @@ CKEditor 5 was designed with focus on creating quality content. There are thus g
 
 ## Image upload
 
-Image upload is handled differently with CKEditor 5, bringing a much better user experience. Solutions used with CKEditor 4 may not be compatible anymore and therefore a new approach is needed.
-
-CKEditor 5 Builds come with {@link features/image-upload#easy-image Easy Image} available out of the box. It is super simple to {@link features/image-upload#easy-image enable image upload with it}.
+CKEditor 5 supports several different image upload strategies. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best option for your project.
 
 ## Plugins
 
@@ -567,8 +565,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
 		<tr>
 			<td><span id="uploadUrl"><a href="/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-uploadUrl">uploadUrl</a></span></td>
 			<td>
-				<p>Uploading images in CKEditor 5 is possible thanks to {@link features/image-upload#easy-image Easy Image} powered by <a href="https://ckeditor.com/ckeditor-cloud-services/" target="_blank" rel="noopener">CKEditor Cloud Services</a> which comes with support for responsive images. To configure it, provide the {@link module:cloud-services/cloudservices~CloudServicesConfig cloud services configuration}. Uploading via CKFinder is available, too, see {@link module:ckfinder/ckfinder~CKFinderConfig#uploadUrl <code>ckfinder.uploadUrl</code>}. </p>
-				<p>Writing your own image upload adapters is also possible, see <a href="https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5" target="_blank" rel="noopener">https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5</a>.</p>
+				<p>There are several image upload strategies supported by CKEditor 5. Check out the {@link features/image-upload comprehensive "Image upload" guide} to learn more.</p>
 			</td>
 		</tr>
 		<tr>

+ 2 - 0
docs/builds/guides/whats-new.md

@@ -26,6 +26,8 @@ The outdated concept of image alignment was dropped in favor of {@link features/
 
 {@img assets/img/builds-image-styles.png 736 Image styles toolbar.}
 
+CKEditor 5 supports several different image upload strategies. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best option for your project.
+
 ### Simple linking
 
 No more complex dialogs for links. When you click a link, first you will see a balloon with an option to either edit the link or open it in a new tab.

+ 45 - 41
docs/features/image-upload.md

@@ -4,66 +4,70 @@ category: features
 
 # Image upload
 
-Inserting images into content created with CKEditor is a very common task. CKEditor 5 introduced a totally new way of handling images, with strong focus on the end user experience. The goal is to make this an effortless and intuitive task.
+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:
 
-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.
 
-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.
+{@img assets/img/image-upload-animation.svg 650 The visualization of the image upload process.}
 
-The image insertion, therefore, is made of a few steps, which are transparent to the end user:
+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:
 
-1. The user inserts an image.
-2. A temporary image (placeholder) is inserted.
-3. The image is being uploaded.
-4. The server returns the image URL.
-5. The temporary image is replaced with the definitive one.
+* [**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.
 
-<!-- TODO [ Drawing: workflow ( User Inserts Image ) -> ( Temporary Image Inserted ) -> ( Image Uploaded ) -> ( URL Returned ) -> ( Temporary Image Replaced with Definitive ) ] -->
+<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>
 
-To make the above process possible, an image upload plugin (such as {@link module:easy-image/easyimage~EasyImage}) must be available. Such plugin will handle both the upload and URL returning steps in the above workflow.
+## Demo
 
-## Responsive images
+The demo below uses the {@link builds/guides/overview#classic-editor Classic editor} configured to use the {@link features/easy-image Easy Image} service provided by [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services):
 
-Another great feature introduced with CKEditor 5 is the ability to have responsive images in the content. With a single image upload, several optimized versions of that image are created after upload, for different size of displays. All this is totally transparent to the end user who uploaded the image.
+{@snippet build-classic-source}
 
-Be sure to use image upload plugins with support for responsive images to enjoy this important additional benefit. [Easy Image](#easy-image) has support for responsive images out of the box, too.
+{@snippet features/easy-image}
 
-## Easy Image
+## Official upload adapters
 
-To make enabling image upload in CKEditor 5 a breeze, by default all builds include the {@link module:easy-image/easyimage~EasyImage `EasyImage` plugin}, which integrates with the Easy Image service provided by [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/). Enabling it is straightforward and the results are immediate:
+### Easy Image
 
-1. Follow {@link @cs guides/easy-image/quick-start Easy Image - Quick start} guide to setup an account.
-2. Configure CKEditor (see {@link module:cloud-services/cloudservices~CloudServicesConfig `CloudServicesConfig`}):
+CKEditor 5 introduces a totally new way of handling images, with strong focus on the end–user experience. It is called {@link features/easy-image Easy Image} and its goal is to make the image upload as effortless and intuitive as possible.
 
-	```js
-	ClassicEditor
-		.create( document.querySelector( '#editor' ), {
-			cloudServices: {
-				tokenUrl: 'https://example.com/cs-token-endpoint',
-				uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
-			}
-		} )
-		.then( ... )
-		.catch( ... );
-	```
+Easy Image is part of the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/) offer. It is a <abbr title="Software as a service">SaaS</abbr> product which:
 
-This is all. At this point, image upload will be automatically enabled in your application.
+* securely uploads images,
+* takes care of rescaling and optimizing them as well as providing various image sizes (responsive images),
+* delivers uploaded images through a blazing-fast CDN.
 
-If you're having troubles in setting up Easy Image, please [contact us](https://ckeditor.com/contact/).
+All that, with virtually zero server setup.
 
-### Demo
+{@link features/easy-image **Learn how to use Easy Image in your project**}.
 
-The demo below uses the {@link builds/guides/overview#classic-editor Classic editor} configured (like above) to use the Easy Image service provided by CKEditor Cloud Services:
+### CKFinder
 
-{@snippet build-classic-source}
+The {@link features/ckfinder CKFinder feature} provides a bridge between the editor and [CKFinder](https://ckeditor.com/ckfinder/), a browser-based file manager and a server-side connectors (PHP and .NET).
+
+There are two ways you can integrate CKEditor 5 with the CKFinder file manager:
+
+* **With the server-side connector only**: In this scenario, images which are dropped or pasted into the editor are uploaded to a CKFinder server-side connector running on your server.
+* **With both the server-side connector and client-side file manager** (recommended): Images dropped and pasted directly into the editor are uploaded to the server (just like in the first option).
+
+	But there are more cool features available, for instance:
+
+	* **uploading** using the full user interface,
+	* **browsing** previously uploaded images,
+	* **editing** images (cropping, resizing, etc.),
+	* **organizing** or deleting images.
+
+{@link features/ckfinder **Learn how to integrate CKEditor 5 with CKFinder in your project**}.
 
-{@snippet features/image-upload}
+## Implementing your own upload adapter
 
-## What's next?
+CKEditor 5 provides an open API that allows you to develop your own upload adapters. Tailored to  your project, a custom adapter will allow you to take the **full control** over the process of sending the files to the server as well as passing the response from the server (e.g. the URL to the saved file) back to the editor.
 
-See the {@link features/image Image feature} guide to learn more about handling images in CKEditor 5.
+{@link framework/guides/deep-dive/upload-adapter **Learn how to develop your own upload adapter for CKEditor 5**}.

+ 1 - 1
docs/umberto.json

@@ -185,7 +185,7 @@
 							"order": 100
 						},
 						{
-							"name": "Real-Time Collaboration",
+							"name": "Real-time collaboration",
 							"id": "features-real-time-collaboration",
 							"slug": "real-time-collaboration",
 							"order": 200