I'm using the ExecCommand for making a very basic WYSIWYG editor as a future project will require me to make one (therefore please don't tell me to for something like CKEditor or tinyMCE). It all works fine when used normally. But if you enter a word that is wider than the iFrame the word doesn't split. Instead a scrollbar is just added to the iFrame. Here is a video showing my problem: https://vimeo.com/42699618 So I'm wondering what the easiest way to prevent this is?
And here is the code:
<script language="JavaScript">
$(document).ready(function(e) {
textArea.document.designMode = 'On';
$("#bold").click(makeBold);
$("#italic").click(makeItalic);
function makeBold() {
textArea.document.execCommand('bold', true, null);
$("#textArea").focus();
}
function makeItalic() {
textArea.document.execCommand('italic', false, null);
$("#textArea").focus();
}
});
</script>
<body>
<iframe id="textArea" style="width: 700px; height:400px;"></iframe>
Essentially your existing system takes care of the first part, putting the word on a new line. You picked the easier version :)
When you render your word, you need to split the string into a number of strings based on the length of the word, and the width of your field.
Make sure you are only splitting the word in the view, and not the word in the data! If the user resizes the view, you wouldn't want to try and put the data back together again :p
Steps: Every time you render, each word is checked to see if it exceeds the width of the view, if it does, split it, render the pieces in order, and continue.