...

View Full Version : anchorOffset and contenteditable



djh101
01-21-2012, 05:10 AM
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.

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?

devnull69
01-21-2012, 03:26 PM
Why not use the build-in functionality for contenteditable elements?

For example: The browser will automatically insert <b> and </b> around your selected text of a contenteditable element if you do this


document.execCommand('bold', false, null);


See this: https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

It works in all normal browsers

BubikolRamios
12-06-2012, 12:08 PM
Bringing this up, coz I have related problem.

1.I need to read (crossbrowser) start and end point of selection in contentEditable div.
2.set selection, from java script, 'right back' where I read it.

reason:

document.execCommand('insertHTML'...
replaces HTML, but selection & focus are lost.

I'm getting nowhere here, so please help.

007julien
12-06-2012, 12:47 PM
It's very difficult to work contenteditable elements. See the source of NicEdit (http://nicedit.com/index.php) or use it.

BubikolRamios
12-06-2012, 02:34 PM
Nope, it is not, once you decide , that only command from execCommand you will ever use is : 'insertHTML'.

Then everything is under your control.

For this to work same as all the rest of execCommand (is applayed but focus and selection are not lost), I need to make selection right after execCommand( 'insertHTML'... is executed. Selection on newly inserted html chunk.

Help on that needed.

And yes, NicEdit, surfed to that, to much code for realy simple thing. Havent seen ever any 'plugin' that I could use rigth out of the box , same goes for NicEdit.
Trying to modify any plugin, realy, allways shows more time waster comparing to DIY.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum