在contentEditable中将HTML转换为纯文本 [英] Convert HTML to plain text in contentEditable

问题描述

我有一个 contentEditable ，并通过捕获（'paste'）来剥离粘贴内容的格式事件。然后我关注一个textarea，将内容粘贴在那里，然后复制该值。几乎从这里得到的答案。问题是我不能这样做：



  $（＃paste-output）。text（$（ #area）VAL（））。 
  

，因为这会将我的整个内容替换为粘贴的文字。所以我需要将内容粘贴到插入位置。我将一个脚本放在一起：



  pasteHtmlAtCaret（$（＃area）。val（））; 
 
 //在CTRL位置粘贴CTRL + V内容
函数pasteHtmlAtCaret（html）{
 var sel，range; 
 if（window.getSelection）{
 sel = window.getSelection（）; 
 if（sel.getRangeAt&& sel.rangeCount）{
 range = sel.getRangeAt（0）; 
 range.deleteContents（）; 
 var el = document.createElement（div）; 
 el.innerHTML = html; 
 var frag = document.createDocumentFragment（），node，lastNode; （（node = el.firstChild））{
 lastNode = frag.appendChild（node）; 
 while 
} 
 range.insertNode（frag）; 
 
 if（lastNode）{
 range = range.cloneRange（）; 
 range.setStartAfter（lastNode）; 
 range.collapse（true）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
 
 $ b} else if（document.selection&& document.selection.type！=Control）{
 document.selection.createRange（）。pasteHTML （HTML）; 
 
 
 
 
 
 
 $ b 
唯一的问题是它粘贴HTML内容，插入符号位置使用 html 变量。我怎样才能将它转换成纯文本？我尝试将jQuery  .text（html）添加到变量中，但没有运气。像这样的东西可能会有所帮助： 
 
 
  el.textContent || el.innerText; 
  
任何想法或更好的解决方案？谢谢！ 
 
 
 
 
 
 编辑： 
感谢下面的答案，我修改了我的代码并解决了这个问题。我基本上把 textarea 的值复制到 div 中，并且只抓取它的 .text（） ：
  //粘贴时，从HTML标签剥离剪贴板（如果有的话）
 $ （）#post_title，#post_content'）。on（paste，function（）{
 var text = $（'< div>）。html（$（＃area）.val（）） .text（）; 
 pasteHtmlAtCaret（text）; 
}，20）; 
}）; 
  
 
 
解决方案
根据乔纳森霍布斯的要求，回答。 
感谢上面的答案，我修改了我的代码并解决了问题。我基本上把textarea的值复制到一个div中，并且只抓取它的.text（）：
 
 
 pre>  //在粘贴，剪贴板上如果有任何
 $（'＃post_title，#post_content'）。on（paste，function（）{
 setTimeout（function（）{
 var text = $（' < div>）。html（$（＃area）.val（））.text（）; 
 pasteHtmlAtCaret（text）; 
}，20）; 
}） ; 
  




I have a contentEditable and I strip the formatting of pasted content on('paste') by catching the event. Then I focus a textarea, paste the content in there, and copy the value. Pretty much the answer from here. The problem is that I can’t do this:

$("#paste-output").text($("#area").val());

because that would replace my entire content with the pasted text. So I need to paste the content at caret position. I put together a script that does that:

pasteHtmlAtCaret($("#area").val());

// pastes CTRL+V content at caret position
function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);

      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteHTML(html);
  }
}

The only problem is that it pastes HTML content, at caret position using the html variable. How can I transform that into plain text? I tried adding the jQuery .text(html) to variable without luck. Something like this might help:

el.textContent||el.innerText;

Any ideas or a better solution? Thanks!

---

EDIT: Thanks to the answers below I modified my code and solved the issue. I basically copied the value of textarea into a div and grabbed only its .text():

// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
    var text = $('<div>').html($("#area").val()).text();
    pasteHtmlAtCaret(text);
  }, 20);
});

解决方案

Upon request from Jonathan Hobbs I am posting this as the answer. Thanks to the answers above I modified my code and solved the issue. I basically copied the value of textarea into a div and grabbed only its .text():

// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
  setTimeout(function(){
    var text = $('<div>').html($("#area").val()).text();
    pasteHtmlAtCaret(text);
  }, 20);
});

这篇关于在contentEditable中将HTML转换为纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！