en:text

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