שדה טקסט עשיר עם תמונות

 <div class="textbox-wrapper">
        <h2>ASK ME SOMETHING:</h2>
        <div id="ask-me" class="textbox" contenteditable="true" ondrop="lockIt(event)" onkeydown="lastPTag(event)">
            <p></p>
        </div>
 </div>

 .textbox-wrapper {
            border: 1px solid black;
            border-radius: 10px;
            padding: 10px;
        }

        .textbox-wrapper p {
            margin: 0;
            padding: 2px 8px;
            min-height: 1rem;
        }

        .textbox {
            background-color: rgb(134, 200, 202);
            border-radius: 10px;
            font-size: 18px;
        }

        .textbox img {
            padding: 8px;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

  function lockIt(dropEv) {
            dropEv.preventDefault();
            const domTargetEle = dropEv.srcElement;
            const imgArr = [];
            if (dropEv.dataTransfer.items) { // browser support
                [...dropEv.dataTransfer.items].forEach(element => {
                    if (element.kind === 'file') {
                        const f = element.getAsFile();
                        if (f.type.startsWith('image')) {
                            imgArr.push(f);
                        }
                    }
                });
            } else {
                [...dropEv.dataTransfer.files].forEach(ele => {
                    if (f.type.startsWith('image')) {
                        imgArr.push(f);
                    }
                })
            }

            imgArr.forEach(image => {
                const reader = new FileReader();
                reader.onloadend = () => {
                    const imgEle = document.createElement('img');
                    imgEle.src = reader.result;
                    domTargetEle.appendChild(imgEle)
                }
                reader.readAsDataURL(image);
            })
        }
        function lastPTag(keyEvent) {
            if ((keyEvent.keyCode === 8 || keyEvent.key === "Backspace") &&
                keyEvent.target.children.length === 1 &&
                (keyEvent.target.children[0].innerHTML === '' ||
                    keyEvent.target.children[0].innerHTML === '<br>' ||
                    keyEvent.target.children[0].innerHTML === undefined)) {
                keyEvent.preventDefault();
            }
        }