Question

我正在尝试从contenteditable ='true'div获取格式化文本以发送到我的服务器。

我曾经使用过textarea，当你得到textarea的值时，它会保留空格和换行符，但是当使用contenteditable div时，即使使用如下所示的样式，我也无法获得格式正确的文本：< / p>

white-space: pre-wrap;
word-wrap: break-word;

例如，如果我将其输入我的div：

"a
 aa

asdf"

我将使用textContent：

来解决这个问题

"a aaasdf"

有没有办法让格式化文本从像textarea这样的可信任的div中获取？

Answer 1

使用.innerHTML来获取换行符。

读取：.innerHTML | MDN

工作代码段：

＆＃13;

document.getElementById('copy').addEventListener('click', function(){
  var text = document.getElementById('input').innerHTML;
  document.getElementById('output').innerHTML = text;
});

＆＃13;

div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<div contenteditable='true' id="input">Enter something funny<br>;)</div>

<button id="copy">Copy Text</button>

<div id="output">Text will be copied here.</div>

＆＃13;

Answer 2

示例来自：Extracting text from a contentEditable div

function getContentEditableText(id) {
    var ce = $("<pre />").html($("#" + id).html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
}

或者：

$.fn.getPreText = function () {
    var ce = $("<pre />").html(this.html());
    if ($.browser.webkit)
      ce.find("div").replaceWith(function() { return "\n" + this.innerHTML; });
    if ($.browser.msie)
      ce.find("p").replaceWith(function() { return this.innerHTML + "<br>"; });
    if ($.browser.mozilla || $.browser.opera || $.browser.msie)
      ce.find("br").replaceWith("\n");

    return ce.text();
};

这需要jQuery。

Answer 3

当您在contenteditable元素中输入内容时，会在目标元素中自动生成HTML节点。~~因此您需要访问其.innerHTML属性并将内容视为HTML，而不是纯文本~~

您可以使用.innerHTML属性访问此HTML内容，也可以使用.innerText，它会返回纯文本但保留格式，如@Rahul Desai的回答和{ {3}}：

＆＃13;

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};

＆＃13;

<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

＆＃13;

如果我输入

您好
        如何

        你是
吗？

进入该div然后单击按钮，控制台显示：

<p>Hello</p><p>how</p><p><br></p><p>are you</p>

Answer 4

document.getElementById('getText').onclick = function () {
    console.log(document.getElementById('edit').innerHTML);
};

<div id='edit' contenteditable='true'>Type here</div>
<input id='getText' type='button' value='Get Text' />

如何从div获取格式正确的文本值

4 个答案: