0

リッチ テキスト エディターを作成しようとしていますが、ほぼ成功しています。私は contenteditable div のエンター キーの動作を変更しようとしています。なぜなら、Enter キーを押すと firefox が生成されても問題<br>ありませんが、Chrome と IE が を生成し<p>、ここで Enter キーを押したとき<div>にすべてのブラウザーに強制的に生成させようとしているからです。Internet Explorer ではすべて正常に動作しますが、すべてのブラウザーでは、または.<br><div contenteditable="true"></div>new 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