如何在可满足的环境中获得正在被点击的行?

Question

我是HTML/JS的新手，我正在尝试将文本编辑器作为一个小项目。如果我没有把我的想法解释清楚，请原谅。

假设我在contenteditablediv环境中有以下文本，并让|代表光标(在大多数编辑器中看起来):

hi this is some text
here is some mor|e text
hello, world!

我怎样才能返回文本"这里还有一些文本"?

我正在使用jQuery，我在想我想使用onClick处理程序，但这不会响应用于导航的箭头键。我需要什么样的事件处理程序?到目前为止，我已经解析了文本以替换div分隔符，但我有点迷失在如何继续。你有什么建议?(一般的链接/建议也可以，我正试图通过这个项目了解更多)

编辑，这是我的html:

<div id="editor" class="editor" contenteditable="true"></div>

JS:

$(document).on('keydown', '.editor', function(e){
//detect 'tab' key
if(e.keyCode == 9){
//add tab
document.execCommand('insertHTML', false, '&#009');
//prevent focusing on next element
e.preventDefault()
}
var text = $("#editor").html();
console.log("MYLITERAL:" + text);
// parse the string :)
// for the div tags, replacing them with n
var tmp = text.replace(/<div>/g, "");
tmp = tmp.replace(/</div>/g, "");
tmp = tmp.replace(/<br>/g, "n");
console.log(tmp);
document.getElementById("demo").innerHTML = tmp;
});

<代码>

Answer 1

您可以尝试以下操作:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="editor" class="editor" contenteditable="true">hi this is some text<br>here is some more text<br>hello, world!</div>
<div id="test">test</div>

PP_6