tinymceをデフォルトでプレーンテキストに貼り付ける方法


103

Googleで何千回もGoogleを作成しました。デフォルトでTinymceをプレーンテキストに貼り付け、[テキストとして貼り付け]ボタンをクリックせずに書式を削除する方法の完全な解決策はありません。

それを実装する方法のアイデアはありますか?または「テキストとして貼り付け」ボタンを自動的に有効にする方法は?

ありがとうございました

回答:


59

編集:このソリューションはバージョン3.x向けです。4.xバージョンの場合は、@ Paulo Nevesからの回答をお読みください

問題は、Pasteプラグインがすべての貼り付けでプレーンテキストの貼り付けを自動的にリセットすることです。だから私たちがする必要があるすべて-それを元に戻します。次のコードが役立ちます。

tinyMCE.init({
...
oninit : "setPlainText",
plugins : "paste"

....
});

setPlainTextの定義

 function setPlainText() {
        var ed = tinyMCE.get('elm1');

        ed.pasteAsPlainText = true;  

        //adding handlers crossbrowser
        if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
            ed.onKeyDown.add(function (ed, e) {
                if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                    ed.pasteAsPlainText = true;
            });
        } else {            
            ed.onPaste.addToTop(function (ed, e) {
                ed.pasteAsPlainText = true;
            });
        }
    }

だから今はいつも明白だ。


実用的なサンプルを作成したペーストプラグインがないためだと思います。92.248.232.12 / tinymce / examples / simple.html tinyMCE.init({... oninit: "setPlainText"、plugins: "paste" ..を見てください。 ..});
er-v

5
すばらしい回答ですが、「ed」の定義に関連するJSエラーが発生します。これは、tinyMCE.get( "elm1")行を削除し、setPlainTextメソッドの最初のパラメーターとしてedを配置するだけで簡単に修正できました。たとえば、「function setPlainText(ed){...」
drmonkeyninja

8
tinymceの後のバージョンでは、これを処理するためにいくつかのオプションが追加されました。paste_text_sticky_default: trueそしてpaste_text_sticky: trueあなたの設定でトリックをする必要があります。(私は3.5.0.1を使用しています)
グレッグ

@ ER-V形式を使用してTinyMCEのフォーマットされた文字列を永続化する方法上の任意の提案:stackoverflow.com/questions/17247900/...
codeObserver

13
試してみたところ.init({ plugins: ["paste"], paste_as_text: true })、TinyMCE 4.1の魅力のように機能しました。追加の機能は必要ありません。
レミブルトン2015

149

tinyMCE 3Xまたは4Xでは、状況が少し変わりました。今これを行うことができ、それは正常に動作します。

tinymce.init({
    plugins: "paste",
    paste_as_text: true
});

5
はい、他のアプローチは機能しませんでしたが、これは機能します。
Tim

2
@Timこの質問の回答に示されているアプローチは、特定のTinyMCE 3.xです。TinyMCE 4以上を使用している場合は、この回答のアプローチで十分です。
レオナルドモンテネグロ

TinyMCEには、ほぼすべてのプラグインまたはオプションがあります。
スーパーサン2017

1
解決策をありがとうございましたが、これは実際には、プラグインが更新されるたびに構成ファイルを編集することを忘れないようにする必要があるということですか?
Mike

84

私はこのコードでこの問題を解決しました

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

11
価値があることについては、あなたのソリューションは選択された答えよりも優れていると思います。
arikfr

@Dariusz Lyson、フォームを使用してtinyMCE形式の文字列を永続化する方法に関する提案はありますか?:stackoverflow.com/questions/17247900/...
codeObserver

9
onInitプロパティedが未定義であるというJavaScriptエラーが発生します。Unable to get property 'add' of undefined or null reference
Tim、

35

私自身、これに遭遇し、TinyMCE 3.4.2以降、次のように簡単に実行できることを発見しました。

paste_text_sticky: true,
paste_text_sticky_default: true

...それは良かった。


2
これらの構成オプションの+1、ペーストプラグインをプラグイン配列に追加することを忘れないでください!
Fredszaq 2012年

3
このアプローチを使用すると、エディターはプレーンテキスト以外のテキストの貼り付けをまだ許可しています。
Tim

7

私はこれが最も簡単な方法だと思います:

tinymce.init({
   ...
   paste_as_text: true,
   plugins: "paste",
   ...
});

1

使用する方が良いですか:

var ed = tinyMCE.activeEditor;

の代わりに:

var ed = tinyMCE.get('elm1');

私は同意します。get( 'elm1')の代わりにactiveEditorを使用してスクリプトを機能させることができました。また、回答にコード+回答として受け入れられたコードを投稿しました。それは
うまく機能し

これは、er-vの回答に向けたコメントです。これは質問に対する答えを提供しません。十分な評判得られたら、どの投稿にもコメントできます。
すべての労働者は必須

1

ちなみに、TinyMCEは、貼り付けプラグインのデフォルトオプションとして実装することで、これを改善しています。詳細:http ://www.tinymce.com/wiki.php/Plugin: paste

しかし、それはまだ完璧ではありません。したがって、次のスクリプトもすべてのHTMLを無効にします。

// Paste
        paste_auto_cleanup_on_paste : true,
        paste_remove_spans: true,
        paste_remove_styles: true,
        paste_retain_style_properties: false,

        paste_preprocess : function(pl, o) 
        {    // Replace <div> with <p>
            o.content = o.content.replace(/<div>/gi, "<p>");    
            o.content = o.content.replace(/<\/div>/gi, "</p>");
            o.content = o.content.replace(/<\r\n/gi, "\n");
            o.content = o.content.replace(/<\n\n/gi, "\n");
            o.content = o.content.replace(/<\n\n/gi, "\n");

            // Replace empty styles
            o.content = o.content.replace(/<style><\/style>/gi, "");    

            o.wordContent = true;            
        },

        paste_postprocess : function(pl, o) 
        {    //console.log(o.node.innerHTML);
            var ed = pl.editor, dom = ed.dom;

            // Remove all tags which are not <p> or <br>
            tinymce.each(dom.select('*', o.node), function(el) 
            {    if (el.tagName.toLowerCase() != "p" && el.tagName.toLowerCase() != "br") 
                {    dom.remove(el, 1); // 1 = KeepChildren
                    console.log(el.tagName);
                }
                dom.setAttrib(el, 'style', '');
            });

        },

出典:http : //www.tinymce.com/forum/viewtopic.php?pid=60121#p60121


1

プラグインなし:貼り付けイベントを聞いて、クリップボードデータを取得

何らかの理由でプラグインを使用できない、または使用したくない場合は、次のように独自の「プレーンテキストとして貼り付け」コールバック関数を作成できます。

tinyMCE.init({

    // ...,

    setup: function (editor) {

        // Listen for paste event, add "Paste as plain text" callback
        editor.onPaste.add(function (editor, e) {

            // Prevent default paste behavior
            e.preventDefault();

            // Check for clipboard data in various places for cross-browser compatibility.
            // Get that data as text.
            var content = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

            // Let TinyMCE do the heavy lifting for inserting that content into the editor.
            editor.execCommand('mceInsertContent', false, content);
        });
    }
});

注:これはTinyMCE 3.5.x用に作成されました。互換性はバージョンによって異なる場合があります。


1
3.xの優れたソリューション-他の応答がどれも私のケースで機能していませんでした
Rolf Pedro Ernst

1

.ymlファイルを使用する場合は、プラグインpasteを追加し、paste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

-1

「プレーンテキストとして貼り付け」は実際にテキストをウィンドウに追加する前にクリーンアップを実行するため、これが可能かどうかはわかりません。データをウィンドウに貼り付けるだけでは、何もできません。(あなたonChangeが何かにフックしない限り)、しかしそれらはあなたがすでに貼り付けられていたコードを修正してしまい、それでそれを「二重修正」するかもしれません。


-1

私は次のようにしました:

var pastePlainText = function() {
    // No need to pass in an ID, instead fetch the first tinyMCE instance
    var ed = tinyMCE.get(0); 
    ed.pasteAsPlainText = true;  

    //adding handlers crossbrowser
    if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
        ed.onKeyDown.add(function (ed, e) {
            if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                ed.pasteAsPlainText = true;
        });
    } else {            
        ed.onPaste.addToTop(function (ed, e) {
            ed.pasteAsPlainText = true;
        });
    }
};

その後:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.