Question

我正在使用contenteditable div创建自定义编辑器，我需要一个javascript代码来计算keypress事件上当前插入位置的行位置。请确保在添加新行或删除行时它也应该有用。

这是我满意的div格式

<div contenteditable="true" id="editor">
  <b>Heading</b>
  <br/>
  Line 1
  <br/>
  Line 2
  <br/>
  Line 3
  <br/>
  Line 4
  <br/>
  Line 5
</div>

请参阅此fiddle：

Answer 1

改为使用<pre>。

<强> HTML

<pre  contenteditable="true" id="editor">
line 1
line 2
line 3
line 4
line 5</pre>

<input id="addBtn" type="button" value="Add Line"/>

<强>的JavaScript

$('#editor').on("mouseup", function getPos() {
    var sel = document.getSelection(),
        nd = sel.anchorNode,
        text = nd.textContent.slice(0, sel.focusOffset);

    var lineNum=text.split("\n").length;
    alert(lineNum);
});

$('#addBtn').click(function(){
   var str = "new line";
   elem = document.getElementById("editor");
   elem.innerHTML =  elem.innerHTML +"\n" + str;        
});

我已更新了我的jsfiddle，并使用了pre而不是<br/>（用于换行符） Fiddle

Answer 2

我不确定你要做什么，但我有个主意。我有一个类似的项目，我不得不从输入框中获取文本。我会说每个段落或行或输入框都有一个id。然后向div添加一个事件。将事件添加到div后，您几乎可以做任何事情。

实施例：它不必是身体，将它添加到你的div。

document.body.addEventListener("foo_event", get_target, false);

<p id="someid">Some cool stuff here or input or whatever.
 Put ids on all your lines so we can have a way to id them. Put 
classes also if you want to style them</p>

function get_target(e){
 //Some event happend let's do something

    if ("someid" === e.target.id ) {
         //Lets run some code on the paragraph or element

/*Ideally you would want an algorithm for testing ids instead of using a bunch of If statements */
     }

}

如何使用keypress上的javascript获取contenteditable div中的当前行位置

2 个答案: