execCommandの「プレーンテキストとして貼り付ける」ためのJavaScriptトリック


106

execCommandここで紹介されているサンプルに従うことに基づいた基本的なエディターがあります。execCommandエリア内にテキストを貼り付ける方法は3つあります。

  • Ctrl+V
  • 右クリック->貼り付け
  • 右クリック->プレーンテキストとして貼り付け

HTMLマークアップなしでプレーンテキストのみを貼り付けることを許可します。最初の2つのアクションを強制的にプレーンテキストに貼り付けるにはどうすればよいですか?

考えられる解決策:Ctrl+ V)のキーアップイベントのリスナーを設定し、貼り付ける前にHTMLタグを取り除くことです。

  1. それは最善の解決策ですか?
  2. 貼り付けでHTMLマークアップを回避することは防弾ですか?
  3. リスナーを右クリック->貼り付けに追加する方法は?

5
余談ですが、エディターにテキストがドラッグされることにも注意しますか?これは、HTMLがエディターにリークする別の方法です。
pimvdb 2012

1
@pimvdbあなたの答えは私のニーズには十分でした。好奇心から、ドラッグの漏れを避ける簡単な方法はありますか?
Googlebot 2012

2
これでうまくいくと思いました:jsfiddle.net/HBEzc/2。しかし、少なくともChromeでは、テキストは常にエディターの最初に挿入されますが、残念です。
pimvdb 2012

ここで説明としてクリップボードAPIを使用する必要があります。 youtube.com/watch?v=Q81HH2Od5oo
Johne Doe

回答:


246

pasteイベントをインターセプトし、をキャンセルしpaste、クリップボードのテキスト表現を手動で挿入します:
http : //jsfiddle.net/HBEzc/。これが最も信頼できるはずです。

  • あらゆる種類の貼り付け(Ctrl+ V、コンテキストメニューなど)をキャッチします。
  • クリップボードのデータをテキストとして直接取得できるため、HTMLを置き換えるために醜いハックをする必要はありません。

ただし、クロスブラウザーのサポートについてはよくわかりません。

editor.addEventListener("paste", function(e) {
    // cancel paste
    e.preventDefault();

    // get text representation of clipboard
    var text = (e.originalEvent || e).clipboardData.getData('text/plain');

    // insert text manually
    document.execCommand("insertHTML", false, text);
});

4
@アリ:私は明白な何かを逃した。場合はtextHTMLが含まれている(例えば、あなたは、プレーンテキストとしてHTMLコードをコピーする場合)、それは実際にはHTMLとして貼り付けます。これに対する解決策がありますが、あまりきれいではありません:jsfiddle.net/HBEzc/3
pimvdb 2012

14
var text = (event.originalEvent || event).clipboardData.getData('text/plain');ブラウザー間の互換性をもう少し提供します
Duncan Walker

10
これにより、元に戻す機能が無効になります。(Ctrl + Z)
Rudey

2
優れたソリューションですが、これはデフォルトの動作とは異なります。ユーザーが<div></div>そのようなものをコピーすると、contenteditable要素の子要素として追加されます。私はそれを次のように修正しました:document.execCommand("insertText", false, text);
Jason Newell

5
IE11 を見つけて動作insertHTMLinsertTextませんが、正常にdocument.execCommand('paste', false, text);動作します。それでも他のブラウザでは機能しないようです> _>。
ジェイミーバーカー

39

ここで受け入れられた回答をIEで機能させることができなかったため、いくつかの調査を行って、IE11とChromeおよびFirefoxの最新バージョンで機能するこの回答にたどり着きました。

$('[contenteditable]').on('paste', function(e) {
    e.preventDefault();
    var text = '';
    if (e.clipboardData || e.originalEvent.clipboardData) {
      text = (e.originalEvent || e).clipboardData.getData('text/plain');
    } else if (window.clipboardData) {
      text = window.clipboardData.getData('Text');
    }
    if (document.queryCommandSupported('insertText')) {
      document.execCommand('insertText', false, text);
    } else {
      document.execCommand('paste', false, text);
    }
});

1
ありがとう、同じ問題に悩んでいました... insertTextがIE11でも最新のFFでも機能していませんでした:)
HeberLZ

1
FirefoxとChromeの両方でテキストを2回貼り付けることが可能ですか?私に
思える

1
@ファンキー私はそれを作成したときにその問題はありませんでしたが、私はこのコードを作成した場所でもはや働いていないので、それがまだ機能するかどうかを伝えることができませんでした!2回貼り付ける方法について教えてください。
ジェイミーバーカー

2
あなたができるかどう@Fankyを参照してください、ここでそれを再作成:jsfiddle.net/v2qbp829を
ジェイミーバーカー

2
私が抱えていた問題は、それ自体がスクリプトによってロードされたファイルからスクリプトを呼び出すことが原因であったようです。私はFF 47.0.1のテキストエリアにもフィドルの入力にも貼り付けることはできません(クロムで行うことができます)が、div contenteditableに貼り付けることができます。これは私にとって重要です。ありがとう!
ファンキー2016

21

pimvdbとしての緊密なソリューション。しかし、FF、Chrome、IE 9で機能します。

editor.addEventListener("paste", function(e) {
    e.preventDefault();

    if (e.clipboardData) {
        content = (e.originalEvent || e).clipboardData.getData('text/plain');

        document.execCommand('insertText', false, content);
    }
    else if (window.clipboardData) {
        content = window.clipboardData.getData('Text');

        document.selection.createRange().pasteHTML(content);
    }   
});

5
短絡content変数の割り当てが好きです。getData('Text')クロスブラウザーで機能することがわかったので、次のように一度だけその割り当てを行うことができvar content = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');ます。その後、クロスブラウザーの貼り付け/挿入コマンドのロジックを使用するだけで済みます。
gfullam 2014年

6
私はあなたが書くことができるとは思わないdocument.selection.createRange().pasteHTML(content)... IE11でテストされただけで、そのように動作しません
vsync

3
document.execCommand('insertText', false, content)IE11およびEdgeの時点では機能しません。また、Chromeの最新バージョンはをサポートするようdocument.execCommand('paste', false, content)になりました。それらは非難されるかもしれませんinsertText
Cannicide 2017

19

もちろん、質問はすでに回答されており、トピックは非常に古くなっていますが、シンプルでクリーンなソリューションを提供したいと思います。

これは私のcontenteditable-divの私のpaste-eventの中にあります。

var text = '';
var that = $(this);

if (e.clipboardData)
    text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
    text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
    text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));

if (document.queryCommandSupported('insertText')) {
    document.execCommand('insertHTML', false, $(text).html());
    return false;
}
else { // IE > 7
    that.find('*').each(function () {
         $(this).addClass('within');
    });

    setTimeout(function () {
          // nochmal alle durchlaufen
          that.find('*').each(function () {
               // wenn das element keine klasse 'within' hat, dann unwrap
               // http://api.jquery.com/unwrap/
               $(this).not('.within').contents().unwrap();
          });
    }, 1);
}

else-partは、もう見つからなかった別のSO-postからのものです...


アップデート19.11.2014: 他のSOポスト


2
:私はあなたがこの記事を参照していると思うstackoverflow.com/questions/21257688/...
gfullam

1
Safariでは私にはうまくいかなかったようです。たぶん何かがおかしい
カンニサイド

8

投稿された回答のいずれも実際にクロスブラウザで動作しないようであるか、ソリューションが複雑すぎます:

  • コマンドinsertTextはIEでサポートされていません
  • pasteコマンドを使用すると、IE11でスタックオーバーフローエラーが発生する

私(IE11、Edge、Chrome、FF)で機能したのは次のとおりです。

$("div[contenteditable=true]").off('paste').on('paste', function(e) {
    e.preventDefault();
    var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
    _insertText(text);
});

function _insertText(text) { 
    // use insertText command if supported
    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    }
    // or insert the text content at the caret's current position
    // replacing eventually selected content
    else {
        var range = document.getSelection().getRangeAt(0);
        range.deleteContents();
        var textNode = document.createTextNode(text);
        range.insertNode(textNode);
        range.selectNodeContents(textNode);
        range.collapse(false);

        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>

カスタム貼り付けハンドラーはcontenteditableノードでのみ必要/機能することに注意してください。textareaとプレーンinputフィールドはどちらもHTMLコンテンツの貼り付けをまったくサポートしていないため、ここでは何もする必要はありません。


これを機能させるに.originalEventは、イベントハンドラー(3行目)で取り除く必要がありました。したがって、完全な行は次のようになりますconst text = ev.clipboardData ? ev.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');。最新のChrome、Safari、Firefoxで動作します。
Pwdr

3

Firefoxではクリップボードデータへのアクセスが許可されていないため、機能させるには「ハッキング」を行う必要があります。私は完全な解決策を見つけることができませんでしたが、代わりにテキストエリアを作成してそこに貼り付けることで、Ctrl + V貼り付けの問題を修正できます。

//Test if browser has the clipboard object
if (!window.Clipboard)
{
    /*Create a text area element to hold your pasted text
    Textarea is a good choice as it will make anything added to it in to plain text*/           
    var paster = document.createElement("textarea");
    //Hide the textarea
    paster.style.display = "none";              
    document.body.appendChild(paster);
    //Add a new keydown event tou your editor
    editor.addEventListener("keydown", function(e){

        function handlePaste()
        {
            //Get the text from the textarea
            var pastedText = paster.value;
            //Move the cursor back to the editor
            editor.focus();
            //Check that there is a value. FF throws an error for insertHTML with an empty string
            if (pastedText !== "") document.execCommand("insertHTML", false, pastedText);
            //Reset the textarea
            paster.value = "";
        }

        if (e.which === 86 && e.ctrlKey)
        {
            //ctrl+v => paste
            //Set the focus on your textarea
            paster.focus();
            //We need to wait a bit, otherwise FF will still try to paste in the editor => settimeout
            window.setTimeout(handlePaste, 1);
        }

    }, false);
}
else //Pretty much the answer given by pimvdb above
{
    //Add listener for paster to force paste-as-plain-text
    editor.addEventListener("paste", function(e){

        //Get the plain text from the clipboard
        var plain = (!!e.clipboardData)? e.clipboardData.getData("text/plain") : window.clipboardData.getData("Text");
            //Stop default paste action
        e.preventDefault();
        //Paste plain text
        document.execCommand("insertHTML", false, plain);

    }, false);
}

2

私はプレーンテキストの貼り付けにも取り組んでおり、すべてのexecCommandエラーとgetDataエラーが嫌いになり始めたので、クラシックな方法で行うことにしました。

$('#editor').bind('paste', function(){
    var before = document.getElementById('editor').innerHTML;
    setTimeout(function(){
        var after = document.getElementById('editor').innerHTML;
        var pos1 = -1;
        var pos2 = -1;
        for (var i=0; i<after.length; i++) {
            if (pos1 == -1 && before.substr(i, 1) != after.substr(i, 1)) pos1 = i;
            if (pos2 == -1 && before.substr(before.length-i-1, 1) != after.substr(after.length-i-1, 1)) pos2 = i;
        }
        var pasted = after.substr(pos1, after.length-pos2-pos1);
        var replace = pasted.replace(/<[^>]+>/g, '');
        var replaced = after.substr(0, pos1)+replace+after.substr(pos1+pasted.length);
        document.getElementById('editor').innerHTML = replaced;
    }, 100);
});

私の表記のコードはここにあります:http : //www.albertmartin.de/blog/code.php/20/plain-text-paste-with-javascript


1
function PasteString() {
    var editor = document.getElementById("TemplateSubPage");
    editor.focus();
  //  editor.select();
    document.execCommand('Paste');
}

function CopyString() {
    var input = document.getElementById("TemplateSubPage");
    input.focus();
   // input.select();
    document.execCommand('Copy');
    if (document.selection || document.textSelection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

上記のコードは、IE10とIE11で機能し、ChromeとSafariでも機能します。Firefoxではテストされていません。


1

IE11では、execCommandがうまく機能しません。IE11のコードは以下の <div class="wmd-input" id="wmd-input-md" contenteditable=true> divボックスです。

window.clipboardDataからクリップボードデータを読み取り、divのtextContentを変更してキャレットを渡します。

キャレットの設定にタイムアウトを指定しています。タイムアウトを設定しないと、キャレットはdivの最後に移動するためです。

そして、あなたは以下の方法でIE11のclipboardDataを読むべきです。そうしないと、改行文字が適切に処理されないため、キャレットが失敗します。

var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;

IE11とChromeでテスト済み。IE9では動作しない可能性があります

document.getElementById("wmd-input-md").addEventListener("paste", function (e) {
    if (!e.clipboardData) {
        //For IE11
        e.preventDefault();
        e.stopPropagation();
        var tempDiv = document.createElement("div");
        tempDiv.textContent = window.clipboardData.getData("text");
        var text = tempDiv.textContent;
        var selection = document.getSelection();
        var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
        var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;                    
        selection.removeAllRanges();

        setTimeout(function () {    
            $(".wmd-input").text($(".wmd-input").text().substring(0, start)
              + text
              + $(".wmd-input").text().substring(end));
            var range = document.createRange();
            range.setStart(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
            range.setEnd(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);

            selection.addRange(range);
        }, 1);
    } else {                
        //For Chrome
        e.preventDefault();
        var text = e.clipboardData.getData("text");

        var selection = document.getSelection();
        var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
        var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;

        $(this).text($(this).text().substring(0, start)
          + text
          + $(this).text().substring(end));

        var range = document.createRange();
        range.setStart($(this)[0].firstChild, start + text.length);
        range.setEnd($(this)[0].firstChild, start + text.length);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}, false);

0

検索して試してみたところ、どういうわけか最適なソリューションが見つかりました

覚えておくべき重要なこと

// /\x0D/g return key ASCII
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))


and give the css style white-space: pre-line //for displaying

var contenteditable = document.querySelector('[contenteditable]')
            contenteditable.addEventListener('paste', function(e){
                let text = ''
                contenteditable.classList.remove('empty')                
                e.preventDefault()
                text = (e.originalEvent || e).clipboardData.getData('text/plain')
                e.clipboardData.setData('text/plain', '')                 
                window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))// /\x0D/g return ASCII
        })
#input{
  width: 100%;
  height: 100px;
  border: 1px solid black;
  white-space: pre-line; 
}
<div id="input"contenteditable="true">
        <p>
        </p>
</div>   


0

だれもがクリップボードデータを回避し、keypressイベントをチェックし、execCommandを使用しようとしているので、OKです。

私はこれを考えました

コード

handlePastEvent=()=>{
    document.querySelector("#new-task-content-1").addEventListener("paste",function(e)
    {
        
        setTimeout(function(){
            document.querySelector("#new-task-content-1").innerHTML=document.querySelector("#new-task-content-1").innerText.trim();
        },1);
    });

}
handlePastEvent();
<div contenteditable="true" id="new-task-content-1">You cann't paste HTML here</div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.