Helo Daniweb,
I am in the process of building a WYSIWYG text editor, in an attempt to understand how they work. I am a novice at JavaScript, however what I have learnt so far seems to make sense.
The problem comes when I try and change the text rapidly, if I change it to bold, then type something then change it to normal and repeat this a couple of times it seems to break and the text doesn't become bold until three or four clicks of the bold button later.
Could someone please explain why it does this and what sort of things I need to add to prevent it, this is my current code:
<!DOCTYPE HTML>
<html lang = "en" >
<head>
<title> WYSIWYG Editor </title>
<script type = "text/javascript" >
function WYSIWYG() {
document.getElementById('Editor').contentDocument.designMode = "on";
}
function Bold() {
document.getElementById('Editor').contentWindow.document.execCommand("bold", false, null);
}
function Italic() {
document.getElementById('Editor').contentWindow.document.execCommand("italic", false, null);
}
function Underline() {
document.getElementById('Editor').contentWindow.document.execCommand("underline", false, null);
}
function Change() {
}
</script>
</head>
<body onload = "WYSIWYG();" >
<button onclick = "Bold()" > <b> B </b> </button>
<button onclick = "Italic()" > <i> I </i> </button>
<button onclick = "Underline()" > <u> U </u> </button> <br><br>
<iframe id = "Editor" ></iframe>
</body>
</html>
Thank you.