<!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <title>Text Editor with Image Replacement</title>
</head> <body>
<div contenteditable="true" id="editor"> Enter your text here... </div> <br> <label for="img-file">Choose an image to replace text:</label> <input type="file" id="img-file"> <br> <button onclick="replaceTextWithImage()">Replace Text with Image</button>
<script>
function replaceTextWithImage() {
const editor = document.getElementById("editor");
const selectedText = window.getSelection().toString();
const fileInput = document.getElementById("img-file");
const file = fileInput.files[0];
if (selectedText !== "" && file) {
const reader = new FileReader();
reader.onload = function(event) {
const imgSrc = event.target.result;
const imgElement = '<img src="' + imgSrc + '">';
const replacementHtml = editor.innerHTML.replace(selectedText, imgElement);
editor.innerHTML = replacementHtml;
};
reader.readAsDataURL(file);
}
}
</script>
</body> </html>
Discussion