Geek asks and answers

Contenteditable put caret out of inserted gap

http://jsfiddle.net/VzbYJ/86/

Please take a look at this link. Since it clears that it is going to insert the gap node into the caret place. The problem is that after inserting a node, if I click on any character, its color is also green. because it is also part of the span element. So, how can I put the caret after the interval so that the color of the next inserted node remains normal.

I tried to find the selected node (based on the caret position), set the range after the element and use collapse (false). But I could not get the desired result.

Code to search for node:

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

, setEndAfter() ant collapse (false). , , . . .

+3
2

"" . , ( Firefox) , (Unicode U+200B) <span>. , , .

jsFiddle, , :

http://jsfiddle.net/VzbYJ/87/

/:

, ...

+6

, . , , .

const editor = document.querySelector('[contenteditable="true"]');
const spans = document.querySelectorAll('span[contenteditable="false"]');

Array.prototype.slice.call(spans).map(span => {
  const empty = document.createTextNode( '\uFEFF' );
  const parentEl = span.parentElement;
  const allchildnodes = editor.childNodes;
  const lastsib = allchildnodes[allchildnodes.length - 1];
  const ended = lastsib.wholeText === '\n';
  const prevsib = ended ? lastsib.previousSibling === span : false;
  if (prevsib) {
    parentEl.appendChild(empty);
  }
});

https://codepen.io/augur/pen/MvaKJO

0

More articles:


All Articles