0

我正在尝试制作一个富文本编辑器，并且我已经接近成功。我正在尝试更改 contenteditable div 中 enter 键的行为，因为当按下 enter 时 firefox 产生了<br>没关系，但 Chrome 和 IE 产生了一个<p>，<div>在这里我试图强制所有浏览器<br>在按下 enter 时产生<div contenteditable="true"></div>。在 Internet Explorer 中一切正常，但在所有浏览器中都必须按两次 Enternew line或<br>。

这是我的代码。

<!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

演示 JSFiddle

4

2 回答 2

1

我的解决方案是处理一个输入按钮。不同标签的不同选项。看看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>

于 2019-07-20T10:57:54.813 回答
0

有用！！！

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);
}

于 2017-02-01T08:35:00.390 回答