I'm trying to do a
rich text editor for a web application, and I need to be able to mark some elements in the text as uneditable by the user. The reason for this is they're placeholders for dynamic content (like created date) that I want to have a live preview for.
Take the following Code as an example - there's no toolbar or anything in this one, for light weightness, but the textarea and html are synchronized.
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<html>
<head>
<title>Hi</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(function() {
g = {};
g.iFrame = document.createElement("IFRAME");
$("#frameContainer").append(g.iFrame);
g.iDoc = g.iFrame.contentWindow.document;
g.iDoc.designMode = "on";
g.jTextArea = $("#textContainer textarea");
setTimeout(function() {
g.iDoc.body.innerHTML = "<b class=\"notype\">Cannot type here</b>";
$(g.iDoc).trigger("keyup");
$(g.iDoc.body).focus();
}, 0);
$(g.iDoc).keyup(function() {
g.jTextArea.text(g.iDoc.body.innerHTML);
});
g.jTextArea.keyup(function() {
g.iDoc.body.innerHTML = this.innerText;
});
var getSelection = function() {
if (typeof g.iDoc.selection !== "undefined" && g.iDoc.selection.type !== "Text" && g.iDoc.selection.type !== "None") {
g.iDoc.selection.clear();
}
return g.iDoc.selection.createRange();
};
$(g.iDoc).keypress(function(event) {
// If we're in a marked field, disable the operation.
var sel = getSelection();
if ($(sel.parentElement()).hasClass('notype')) {
sel.moveToElementText(sel.parentElement());
sel.collapse();
sel.move("character", -1);
sel.select();
$("#log").append("<div>outside of thing</div>");
}
});
$(testLink).click(function() {
// Try and insert stuff at the front
$(g.iDoc.body).focus();
var sel = getSelection();
sel.moveToElementText(sel.parentElement());
sel.collapse();
sel.move("character", -100);
sel.pasteHTML("Before html?");
$(g.iDoc).trigger("keyup");
$(g.iDoc.body).focus();
});
});
</script>
</head>
<body id="#body">
<div id="container">
<div id="frameContainer">
<h1>
Frame</h1>
</div>
<div id="textContainer">
<h1>
Text</h1>
<textarea rows="10" cols="80"></textarea>
</div>
<a href="#" id="testLink">Test</a>
<div id="log">
</div>
</div>
</body>
</html>
In the keyup binding, I can successfuly detect if I'm inside another element, and move the cursor to the front of the text before inserting it no problem. However, since there is no text before the element marked as 'notype', it gets inserted inside the same element.
This is double bad when the user presses "enter", as a new tag is genrated, and the "notype" tag is duplicated, obviously not required.
I want the behaviour as follows:
* If the user types while the cursor is in the 'notype' tag, the cursor is moved to front and the text goes there
* If the cursor is at the last position inside the 'notype' tag, then the text appears after the tag
* If the user types anywhere else, it's inserted as always.
The link at the bottom tries to manually put the cursor at the front and insert the html. Obviously fails. I know this one can work by doing something like $(g.iDoc.body).prepend("before!"), but this obviously won't work in a real scenario (using keyup).
