I have a form with a text box element in it.
I want to be able to use the textbox the same way it would work in an email body.
Where you can have:
- HTML code in the body
- In line Images
So something like this should be doable:
Text here
Image Here
Text here
HTML here
Text Here
I am unfortunately only limited to 1 HTML file so CSS and Scripting has to be done in one file along with the HTML body. Since I am using this as a front end that we’ll be attaching to a separate system.
So actually something like this textbox I am using to post this question with a formatting header would work as well.
Any help is appreciated
Thank you!
Right now I am just working on a simple one.
It sort of works and allows drag and drop of images but the drag and drop portion is separate.
Also, it does not allow HTML elements like this text box would.
Sample below:
<!DOCTYPE html>
<html>
<head>
<title>HTML Textbox with In-line Images</title>
<style>
#description {
border: 1px solid black;
padding: 10px;
min-height: 200px;
}
#dropArea {
border: 1px solid black;
padding: 10px;
min-height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div id="description" contenteditable="true"></div>
<input type="hidden" id="htmlInput" name="htmlInput">
<button onclick="getHTML()">Submit</button>
<br><br>
<div id="dropArea" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.src);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var img = document.createElement("img");
img.src = data;
img.style.width = "100px";
img.style.height = "100px";
ev.target.appendChild(img);
document.getElementById("description").focus();
document.execCommand("insertHTML", false, " " + img.outerHTML + " ");
document.getElementById("htmlInput").value = document.getElementById("description").innerHTML;
}
function getHTML() {
document.getElementById("htmlInput").value = document.getElementById("description").innerHTML;
}
</script>
</body>
</html>
Jake is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.