0

I'm trying to make a rich text editor and i have near to my success. I'm trying to change the behaviour of enter key in contenteditable div because when pressing enter firefox produced <br> thats ok but Chrome and IE produced a <p> and <div> here i'm trying to force all browser to produce <br> when press enter under <div contenteditable="true"></div>. Everything working fine in internet explorer but in all browsers would have to press enter two times for new line or <br>.

Here is my code.

<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
<script type="text/javascript">
function preview() {
    var textbox = document.getElementById('textBox');
    document.getElementById("view").innerHTML=textbox.innerHTML;
}
function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }
        // If successful, prevent the browser's default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}
function onload(){
    var el = document.getElementById("textBox");
    if (typeof el.addEventListener != "undefined")
    {
        el.addEventListener("keypress", enterKeyPressHandler , false);
    }
    else if (typeof el.attachEvent != "undefined")
    {
        el.attachEvent("onkeypress", enterKeyPressHandler);
    }
}
</script>
</head>
<body onload="javascript:onload();">
<form name="myform" method="POST">
<div id="textBox" contenteditable="true" style="width:500px; height:150px; padding:20px; border:solid thin #000"></div>
</form>
<br>
<div id="view" style="width:500px; height:150px; padding:20px; border:solid thin #000"></div>
<br>
<button onClick="javascript:preview();">Preview</button>
</body>
</html

Demo JSFiddle

user2758988
  • 139
  • 5
  • 17
  • It's tricky to get perfect. I've never managed it (including in your code above, most of which looks like it was taken from an [answer of mine](http://stackoverflow.com/a/3492423/96100)) but haven't had to so far. As I commented on the linked answer, I'd have a look through the source of one of the big WYSIWYG editors. – Tim Down Nov 14 '13 at 11:28
  • yea definitely it is taken from your answer, code working fine in IE but in all other browsers would have to press enter twice for new line or br. – user2758988 Nov 14 '13 at 11:53
  • Can you tell me, you copy code from which editor ? – user2758988 Nov 14 '13 at 12:00
  • I didn't copy mine from anywhere. I'd take a look at CKEditor or TinyMCE: they've both had to deal with this. – Tim Down Nov 14 '13 at 12:03
  • if (typeof window.getSelection != "undefined") { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); br = document.createElement("br"); range.insertNode(br); range.setEndAfter(br); range.setStartAfter(br); sel.removeAllRanges(); sel.addRange(range); addedBr = true; } problem in this code – user2758988 Nov 14 '13 at 12:09

2 Answers2

1

My solution is to handle an enter button. Different options for different tags. Look at https://codepen.io/MaratKh/pen/oKXxvV

const ed = document.getElementById('editable'),
      ta = document.getElementById('txt');

const key13 = function(ev){
  
  if(ev.keyCode==13) {
    ev.preventDefault();
    const selection = window.getSelection(),
        range = selection.getRangeAt(0),
        node = document.getSelection().anchorNode,
        pNode = node.parentNode;
  var tag = pNode.nodeName.toUpperCase();
  switch(tag) {
      case 'P':
        tag = 'BR';
      break;

      case 'DIV':
        tag = 'p';
      break;

      case 'SPAN':
        tag = 'span';
      break;

      case 'BR':
        tag = NULL;
      break;

      default:
        tag = 'BR';

    }

    const el = document.createElement( tag );

    range.deleteContents();
    range.insertNode(el);

    if ('BR'===tag) {
      range.setStartAfter(el);
      range.setEndAfter(el);
    } else {
      range.setStart(el, 0);
      range.setEnd(el, 0);
    }

    const ze = document.createTextNode("\u200B");
    range.insertNode(ze);
    range.setStartBefore(ze);
    range.setEndBefore(ze);

    selection.removeAllRanges();
    selection.addRange(range);
    ev.stopPropagation();
  }
  
  ta.value = ed.innerHTML;
}

ed.addEventListener( 'keydown', key13, false);
.xrow {
  display: block;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
.xrow .col {
  display: block;
  flex: 1;
}
  
.xrow .col:first-child{
    border-right:#669 1px dashed;
    margin-right:20px;
}

textarea {
  width:100%;
  height:300px;
}

#editable{
  padding:16px 9px;
  border: 2px dashed #ddc;
}
<div class="xrow">
  <div class="col">
    <h3>Editable</h3>
    <div id="editable" contenteditable="true">
      <h1>Hi</h1>
      <div>div</div>
      <p>p</p>
      text
    </div>
  </div>
  <div class="col">
    <h3>Result</h3>
    <textarea id="txt"></textarea>
  </div>
</div>
VVV
  • 31
  • 2
0

IT WORKS!!!

if (window.getSelection) {
  var selection = window.getSelection(),
  range = selection.getRangeAt(0),
  br = document.createElement("br");
  
  range.deleteContents();
  
  range.insertNode(br);
  var newLine=document.createTextNode('\n');
  
  range.setStartAfter(br);
  range.setEndAfter(br);
  
  range.insertNode(newLine);

  selection.removeAllRanges();
  selection.addRange(range);
}