A html page contains multiple divs
. These divs have one button in it and some sample text.
The content of div are formatted
(simple bold, color, size etc) via script.
Issue: The content of div should get formatted only when user clicks button, and since div content is editable, formatting should get applied to updated text/content, after click.
Tried: Adding and removing script tag via JavaScript.
Basic template I have now:
<html>
<head>
<script type="text/javascript" src="path_to_library.js" async></script>
</head>
<body>
<div>
<input type="button" value="click" onclick="format_call()">
<div id="page1" contentEditable='true'>
Bold Text. Italic text. Color Text.
</div>
</div>
<div>
<input type="button" value="click" onclick="format_call()">
<div id="page2" contentEditable='true'>
Bold Text. Italic text. Color Text.
</div>
</div>
</body>
<script>
function format_call() {
var tag = document.createElement("script");
tag.type = "text/javascript";
tag.src = "path_to_library.js";
//document.getElementsByTagName("head")[0].appendChild(tag);
document.head.appendChild(tag).parentNode.removeChild(tag);
}
</script>
</html>
Note: No JQuery based solutions.