|
JavaScript - Anchoroffset And Contenteditable
I am working on a function that will style text in a contenteditable div. For example, when Ctrl+b is pressed, <b></b> tags will be inserted around the currently selected text. The problem is that, unlike a textarea, a contenteditable div is not made up of a single text node.
Code: function moobar(element,e){
if(e.keyCode == "17"){ //IF CTRL IS PRESSED
var selectionStart = window.getSelection().anchorOffset ;
var selectionEnd = window.getSelection().focusOffset ;
var range = document.createRange(), selection = window.getSelection();
var foobar = document.createElement('div');
if(selectionStart == selectionEnd){
//NO TEXT IS HIGHLIGHTED
//I'LL DEAL WITH THIS PART LATER
} else {
if(selectionStart > selectionEnd){
foobar.innerHTML = element.innerHTML.substring(0, selectionEnd );
element.innerHTML = element.innerHTML.substring(0, selectionEnd ) + "<b>" + element.innerHTML.substring( selectionEnd , selectionStart ) + "</b>" + element.innerHTML.substring( selectionStart );
} else {
foobar.innerHTML = element.innerHTML.substring(0, selectionStart );
element.innerHTML = element.innerHTML.substring(0, selectionStart ) + "<b>" + element.innerHTML.substring( selectionStart , selectionEnd ) + "</b>" + element.innerHTML.substring( selectionEnd );
}
range.setStart( element.childNodes[foobar.children.length+2] ,0);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
Might there be a possible way to find out which child of the editable div the offsets are in? For example, if div1's innerHTML was "Some <b>bolded</b> text" and "ex" was highlighted, would there be a way to find out that anchorOffset is inside div1.childNode[2]? If not, then what I really need are just some general suggestions about where to go from here? Similar TutorialsI have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times. Example Code: Code: <div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div> I require this code to work in: IE, Firefox, Opera, Safari and Chrome. Can anyone offer any help? Consider the following test page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Contenteditable Test</title>
<style>
.test {} [contenteditable="true"] { outline:1px solid red; }
</style>
<script>
function listen(id, eventName, func) {
el = document.getElementById(id);
if (el.addEventListener)
el.addEventListener(eventName, func, false);
else
el.attachEvent('on'+eventName, func);
}
window.onload = function() {
listen('root', 'click', toggle);
listen('test', 'click', toggle);
}
function toggle(e) {
var el = getTarget(e).parentNode;
if (el.id == 'test') {
el.setAttribute('contenteditable', 'true');
} else {
el.setAttribute('contenteditable', 'false'); /* The style of the element should change accordingly. *** BUT *** it DOESN'T!!!! */
alert(el.getAttribute('contenteditable')); /* Confirm that contenteditable is 'false'. */
}
}
function getTarget(e) {
return (window.event == undefined ? e : window.event).target;
}
</script>
</head>
<body>
<div id="root">
<h1>Contenteditable Test</h1>
<div id="test" contenteditable="false">
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</body>
</html>
The desired behaviour is: When you click on the test div, the content should become editable (and the style of the div should change accordingly - the test div gets a red outline). When you click outside the test div, the content should become not-editable (and the style of the div should change accordingly - the test div loses its red outline). When you click on the test div, its contenteditable attribute is set to 'true' and it becomes editable, as expected. When you click outside the test div, its contenteditable attribute is set to 'false', as expected, BUT its style does not change accordingly. I would expect it to change because the red outline style is predicated upon contenteditable being 'true' for the element, but the red outline remains even when contenteditable is no longer 'true'. By the way, I have tried 'false', false and 0, all to no avail. Obviously, I can force the style of the element when it is 'deselected', but that is a very ugly hack and will cause a headache if/when I want to change the contenteditable style in the future (I don't want to have to do it in several places - it should be possible to do it just in the CSS). Any ideas why this is happening? I've got the following problem. In IE if a contenteditable element is nested inside a hyperlink, clicking on the element prevents the hyperlink default behavior, i.e. navigation to another document. In FF it works fine. How can I solve the problem? Just removing the contentEditable attribute is not a solution since I want this behavior (navigation to another document) only when user clicks the content-editable element with pressed Ctrl key. Thanks. |
|||||||