通过javascript从contenteditable div获取文本内容

I want retrieve the text content from a contentEditable div through javascript. What are the options of doing this? I've tried innerHTML but it doesn't work.

我想通过javascript从contentEditable div中检索文本内容。这样做有哪些选择？我尝试过innerHTML，但它不起作用。

6 个解决方案

#1

use jQuery and do

使用jQuery并做

var content = $('#my-contenteditable-div').html();

var content = $（'＃my-contenteditable-div'）。html（）;

also look up these links:

还查看这些链接：

http://west-wind.com/Weblog/posts/778165.aspx

Extracting text from a contentEditable div

从contentEditable div中提取文本

#2

Why not use textContent for this:

为什么不使用textContent：

var contenteditable = document.querySelector('[contenteditable]'),
    text = contenteditable.textContent;

http://jsfiddle.net/E4W8y/1/

#3

Unfortunately, I've found that innerText is the only way to preserve newlines in contenteditable dom nodes. What I'm doing (tested only in chrome at the moment) is this:

不幸的是，我发现innerText是在可信任的dom节点中保留换行符的唯一方法。我正在做什么（目前只在chrome测试）是这样的：

 var innerText = editableDiv.innerText  // using innerText here because it preserves newlines
 if(innerText[innerText.length-1] === '\n') 
     innerText = innerText.slice(0,-1)             // get rid of weird extra newline
 return innerText

#4

lblMailContent is the id of editable field.

lblMailContent是可编辑字段的id。

var details= document.getElementById("lblMailContent").innerHTML;

Put this code in clientClick. It worked well for me.

将此代码放在clientClick中。它对我很有用。

#5

I solved it this way, because i need html-input:

我这样解决了，因为我需要html输入：

message = $('<div>').html(
   $('#area').html()
   .replace(/<(div|p|br)[^<]*?>/g, '&lt;br /&gt;')
   .replace(/<([(i|a|b|u)^>]+)>(.*?)<\/\1>/gim,
      function(v) { return '' + escape(v) + ''; })
).text();

Allows the tags A, B, I, U and replaces Divs and Ps with BRs

允许标签A，B，I，U并用BR替换Div和Ps

#6

Using text content, working fine in most of the cases Working Example: jsfiddle(verified in Safari)

使用文本内容，在大多数情况下工作正常工作示例：jsfiddle（在Safari中验证）

#1