Удалить форматирование из div contentEditable - PullRequest
Новая
       24

Удалить форматирование из div contentEditable

22 голосов
/ 01 августа 2011

У меня есть div contentEditable Div, и я хочу удалить любое форматирование, особенно для копирования и вставки текста.

Ответы [ 8 ]

31 голосов
/ 25 апреля 2016 
document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    });

Все просто: добавьте слушателя к событию "вставить" и переформатируйте содержимое буфера обмена.

Вот еще один пример для всех контейнеров в теле: 

[].forEach.call(document.querySelectorAll('div[contenteditable="true"]'), function (el) {
    el.addEventListener('paste', function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    }, false);
});

Saludos.

23 голосов
/ 01 августа 2011

Вы пытались использовать innerText?

ADDED:

Если вы хотите удалить разметку из содержимого, вставленного в редактируемый div, попробуйте старый способ создания временного div - см. Примерниже. 

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Strip editable div markup</title>

<script type="text/javascript">
function strip(html) {
    var tempDiv = document.createElement("DIV");
    tempDiv.innerHTML = html;
    return tempDiv.innerText;
}

</script>
</head>

<body>

<div id="editableDiv" contentEditable="true"></div>

<input type="button" value="press" onclick="alert(strip(document.getElementById('editableDiv').innerText));" />

</body>

</html>
5 голосов
/ 29 января 2015

Искал ответ на этот вопрос целую вечность и в итоге написал свой.

Надеюсь, это поможет другим. На момент написания этого он работает в ie9, последней версии Chrome и Firefox. 

<div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" />

<script type="text/javascript">

                var _onPaste_StripFormatting_IEPaste = false;

                function OnPaste_StripFormatting(elem, e) {

                    if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
                        e.preventDefault();
                        var text = e.originalEvent.clipboardData.getData('text/plain');
                        window.document.execCommand('insertText', false, text);
                    }
                    else if (e.clipboardData && e.clipboardData.getData) {
                        e.preventDefault();
                        var text = e.clipboardData.getData('text/plain');
                        window.document.execCommand('insertText', false, text);
                    }
                    else if (window.clipboardData && window.clipboardData.getData) {
                        // Stop stack overflow
                        if (!_onPaste_StripFormatting_IEPaste) {
                            _onPaste_StripFormatting_IEPaste = true;
                            e.preventDefault();
                            window.document.execCommand('ms-pasteTextOnly', false);
                        }
                        _onPaste_StripFormatting_IEPaste = false;
                    }

                }

    </script>
3 голосов
/ 26 апреля 2018

Я знаю, что это было давно, но у меня была та же проблема. На мой случай, это приложение GWT, чтобы сделать его еще хуже. Так или иначе, решена проблема с: 

var clearText = event.clipboardData.getData('text/plain');
document.execCommand('inserttext', false, clearText);

См .: https://jsfiddle.net/erikwoods/Ee3yC/

Я предпочел команду «inserttext» вместо «insertHTML», потому что в документации сказано, что это именно то, что нужно для вставки простого текста, поэтому он кажется более подходящим. Смотри https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

2 голосов
/ 02 июля 2014

С помощью Jquery вы можете использовать метод .text () , поэтому, например, при размытии можно заменить содержимое текстовым содержимым 

$("#element").blur(function(e) {
    $(this).html($(this).text());
});
0 голосов
/ 22 января 2018 

<p spellcheck="false" contentEditable onkeydown="return false">text</p>
0 голосов
/ 27 июля 2016

Я хотел бы добавить свое решение к этой проблеме: 

ContentEditableElement.addEventListener('input', function(ev) {
  if(ev.target.innerHTML != ev.target.textContent) {

    // determine position of the text caret
    var caretPos = 0,
      sel, range;
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      var children = ev.target.childNodes;
      var keepLooping = true;
      for(let i = 0; keepLooping; i++) {
        if(children[i] == range.commonAncestorContainer || children[i] == range.commonAncestorContainer.parentNode) {
          caretPos += range.endOffset;
          keepLooping = false;
        } else {
          caretPos += children[i].textContent.length;
        }
      }

      // set the element's innerHTML to its textContent
      ev.target.innerHTML = ev.target.textContent;

      // put the caret where it was before
      range = document.createRange();
      range.setStart(ev.target.childNodes[0], caretPos);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
});

(это не совместимо с более старыми версиями IE)

0 голосов
/ 01 августа 2011

Вы не можете получить доступ к системному буферу обмена, поэтому вам понадобится взломать. Смотрите этот вопрос: JavaScript получает данные буфера обмена при вставке события (кросс-браузер)

...