contenteditable上でペーストした際にスタイルを削除する方法

こんにちは。

最近、<input type="text">や<textarea>の代わりに<div contenteditable="true">を使っています。
いろいろな利点があり、とても便利です。
厄介なのは、ペーストした際にスタイルがそのまま維持されること。
htmlベースなので当たり前ではありますが、ちょっとそこが面倒です。
でもcontenteditableってそういうものか、って今まで見逃してきたのですが。
ツイッターのウェブ版を使っていて、ふとツイートするフォームのソースを覗いてみたら、contenteditableでできていました。

しかし、スタイルが適用されているテキストなどをコピペしても、スタイルが適用されず、素のテキストとして貼り付けられます。
一応自分でもソースを見てみましたが、よくわかりませんでした。
どのような技術が使われているのでしょうか？
説明がわかりにくくて申し訳ありません
よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

クリップボード、選択範囲に関してブラウザごとに少し動作が違うので対応が難しいです。
貼り付けイベントを検知したらそれをキャンセルし、貼り付けられようとした内容を取得したあとそれをカーソル位置に挿入するようにすることで実現できます。
次のようなコードで動作を確認しました。IE 8 は知りません。

lang
1<!doctype html>
2<html>
3<body>
4    <div id="area" contenteditable>テスト</div>
5    <script>
6        (function () {
7            var area = document.getElementById("area");
8            area.addEventListener("paste", function (e) {
9                e.preventDefault();
10                var text;
11                if (window.clipboardData) {
12                    text = window.clipboardData.getData("text");
13                } else {
14                    text = e.clipboardData.getData("text/plain");
15                }
16
17                if (document.selection) {
18                    // 〜Internet Explorer 10
19                    var range = document.selection.createRange();
20                    range.text = text;
21                } else {
22                    // Internet Explorer 11/Chrome/Firefox
23                    var selection = window.getSelection();
24                    var range = selection.getRangeAt(0);
25                    var node = document.createTextNode(text);
26                    range.insertNode(node);
27                    range.setStartAfter(node);
28                    range.setEndAfter(node);
29                    selection.removeAllRanges();
30                    selection.addRange(range);
31                }
32            }, false);
33        }());
34    </script>
35</body>
36</html>

投稿2016/03/06 06:27

chitoku

総合スコア1610

他の回答者さんのクリップボードAPIを使った方法が良いと思います。

Chrome, Firefox, IEのCopy & Paste実装方法

古いブラウザもカバーする場合は、下記のような書き方でも同様のことができます。
ペーストイベント時に、少しタイミングをずらして取得することで貼り付け後のテキスト全てを取得して、textメソッドでプレーンな状態に置き換えます。

var pastePlainText = function() {
  this.init();
};

pastePlainText.prototype = {
  init: function() {
    this.$textbox = $('#area');
    
    this.bindEvent();
  },
  bindEvent: function() {
  var _self = this;  
  
  this.$textbox.on('paste', function() {
      _self.pasteText();
    });
  },
  pasteText: function(){
    var $textbox = this.$textbox,
        plainText;
    
    setTimeout(function(){
      plainText = $textbox.text();
      $textbox.text(plainText);
    }, 0);
  }
};

new pastePlainText();

投稿2016/03/06 07:16