Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts

    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?
    "Yeah science!"
    Online Science Tools

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    document.execCommand('bold', false, null);
    See this: https://developer.mozilla.org/en/Ric...ing_in_Mozilla

    It works in all normal browsers

  • #3
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    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:
    Code:
    document.execCommand('insertHTML'...
    replaces HTML, but selection & focus are lost.

    I'm getting nowhere here, so please help.
    Last edited by BubikolRamios; 12-06-2012 at 01:24 PM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #4
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    It's very difficult to work contenteditable elements. See the source of NicEdit or use it.

  • #5
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,963
    Thanks
    120
    Thanked 76 Times in 76 Posts
    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.
    Last edited by BubikolRamios; 12-06-2012 at 01:39 PM.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •