I'm trying to build a rich text editor without any frameworks, and I want to input images to the text box, which is an iframe. How do I display the image inside the text box just by opening it?
That's what I have so far:
//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">