増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

TinyMCEでhtmlをペーストさせないようにする

      2013/06/28

基本的にはckeditor派ですが、仕事上どうしてもTinyMCEを使っているrmascoです

 

 

さてさて、TinyMCEというかwysiwygですが、基本的にhtmlエディタなので、

プレビューモード(htmlをブラウザで見た時を表現してくれる)と
HTML編集モード(ソースコードをそのまま表示してくれる)があります。

 

ckeditorもそうですが、プレビューモード時にブラウザ上の文字などコピーしたものを

wysiwyg内にペーストすると、文字色など装飾された情報なども貼り付けられます。

もっとすごいのは、youtubeの一覧画面でコピーしたものを貼り付けると、

なんと動画も貼り付けられちゃいます!!

 

これは、コピーした時にhtmlソースも一緒にコピーしてくれており、

それをペーストされたwysiwygがhtmlを解釈してプレビューとして

そのままの表現を再現してくれています。

 

ただ、やはり使い方によっては文字色やリンクだけhtmlを認めるけど、

それ以外は入力してほしくないという入力欄があるとします。

 

tinymceのconfigでwysiwyg上のボタンの表示非表示はコントロールすることができます。

ただ、先ほどの方法でコピー&ペーストされてしまうと、

許可していないタグまで貼り付けられてしまいます。

 

これはまずいですね。

 

ckeditorではそんな時用にこんなオプションがあります。

forcePasteAsPlainText

 このオプションをtrueに設定すると、ペースト時にhtmlタグを全て取り除いたプレーンなテキストにしてくれます!

実に便利!

 

tinymceでもこういうオプションあるだろうと探してみたところ、下記のようにすれば可能ということがわかりました。

 

 解説すると、pluginにpasteをセットします。これはこの後のpaste_text_strickyやpasteAsPlainTextといオプションを使用するために必要なようです。

setupというのはtinymce起動時に初回に走るイベントのようです。

ここでpasteAsPlainTextをtrueでセットします。

このオプションもpasteプラグインの機能なのか、pluginにpasteをセットしないと動きません。

 

これだけでhtmlをそのまま貼り付けられても、プレーンテキストとしてhtmlを除去し、

貼り付けてもらうことができます。

 

 

 

 - tinymce