Estoy tratando de crear un editor de texto enriquecido sin marcos y quiero ingresar imágenes en el cuadro de texto, que es un iframe. ¿Cómo muestro la imagen dentro del cuadro de texto con solo abrirlo?
Eso es lo que tengo hasta ahora:
//Show Image in Text Box function showImg() { const textBox = document.getElementbyID("textBox"); const imgFile = document.querySelector("input[type=file]").files[0]; textBox.onload = function(e) { const image = document.createElement("img"); image.src = e.target.result; document.body.appendChild(image); } textBox.readAsDataURL(imgFile); } iframe { border: 0; width: 100%; margin-bottom: 5pt; height: 250pt; } .fas { color: #f85991; font-size: 50pt; } .hidden { display: none; } <!-- Input File --> <div class="hidden"> <input type="file" name="imageUpload" accept="image/*" id="imageUpload"> </div> <!-- Image Button --> <label for="imageUpload" title="Inserir Imagem"> <i class="fas fa-image"></i> </label> <!-- Text Box --> <iframe name="richTextField" id="textBox" contenteditable="true"></iframe> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">