カテゴリー
tinymce

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

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

 

 

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

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

 

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

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

これはまずいですね。

 

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

forcePasteAsPlainText

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

実に便利!

 

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

plugins : "paste",
paste_text_sticky : true,
setup : function(ed) {
    ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
    });
}

 

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

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

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

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

 

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

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

 

 

 

カテゴリー
tinymce

tinymceカスタマイズ

個人的にはCKEDITORが大好きなrmascoです。しかし仕事でMTを使っており、MTのリッチテキストエディタがtinymceを採用していることから、tinymceの勉強もしなければなりません。

どうも昔使った時のイメージから重い、表示が遅いなど食わず嫌いしていましたが、使ってみると最近は高速化もだいぶ進んでいるのと、ブラウザのJavaScriptエンジンも高速化されているので、だいぶ軽いです。僕と同じようにtinymceを食わず嫌いしている人は是非使ってみてください。

それでは本題のtinymceの設定です。

tinymceはckeditorと同じように設定値を渡してあげることによって様々な事ができます。ボタンの場所、ボタンの表示非表示、エンターキーを押した時に入るタグや、フォントサイズの選択肢などなど。ここでは一部使ったものを紹介します。

mode

tinymceを適用するDOMの選択方法を指定します。

tinymce.init({

    mode: “textareas”

});

textareas テキストエリア全てを対象とします
specific_textareas editor_selectorに一致するか、editor_deselectorに一致しないテキスト領域要素をすべて対象とします。
exact elementsに指定されたものを対象とします。
none 全てを対象外とします。ただし、tinyMCE.execCommand(“mceAddControl”, true, “id”)とすることでidをtinymceを適用することができます。

plugins

tinymce内で使用するプラグインをカンマ区切りで指定します。

tinymce.init({

    plugins: “table,contextmenu,paste,-externalplugin”

});

language

tinymce内で使用する言語を指定します。

convert_urls

自動的にurlを相対パスに変更するかどうかを指定します。

tinymce.init({

    convert_urls: “true”

});

editor_selector

tinymceを適用するDOMをクラス名で指定します。

tinymce.init({

    mode: “textarea”,

    editor_selector: “class1,class2”

});

editor_deselector

tinymceを適用しないDOMをクラス名で指定します。

tinymce.init({

    mode: “textarea”,

    editor_deselector: “notEditor1,notEditor2”

});

設定に関するドキュメントはこちらにあります。

http://www.tinymce.com/wiki.php/Configuration

たくさんありすぎてまだまだわからないところも多いですが、もう少しわかるようになったら、このブログに追記します。