How to make tinymce paste in plain text by default

JavascriptJqueryTinymce

Javascript Problem Overview


Googled it thousands of times, No one gives a complete solution of how to make Tinymce paste in plain text by default and strip out any formatting without clicking the "paste as text" button.

Any Ideas of how to implement that? or how to enable the "paste as text" button automatically?

Thank you

Javascript Solutions


Solution 1 - Javascript

For the tinyMCE 3X or 4X things have change a little. now you can do this and it works fine.

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

Solution 2 - Javascript

I have solved this problem with this code

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

Solution 3 - Javascript

EDIT: this solution is for version 3.x, for 4.x version read the answer from @Paulo Neves

The problem is that Paste plugin automatically resets plain text paste on every paste. So all we need to do - set it back. The following code should help.

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

....
});

The definition of 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;
            });
        }
    }

So now it always will be plain.

Solution 4 - Javascript

Just ran into this one myself and discovered that as of TinyMCE 3.4.2 you can simply:

paste_text_sticky: true,
paste_text_sticky_default: true

...which was nice.

Solution 5 - Javascript

I think the easiest way would be this:

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

Solution 6 - Javascript

Isn't it better to use:

var ed = tinyMCE.activeEditor;

instead of:

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

Solution 7 - Javascript

FYI, TinyMCE has improved this by implementing it as a default option in the paste plugin. More info: http://www.tinymce.com/wiki.php/Plugin:paste

However, it's still not perfect. So here is a script that also trips off all 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', '');
            });
            
        },

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

Solution 8 - Javascript

Without plug-in: Listen to paste event, get clipboard data

If you cannot use or do not want to use a plug-in for whatever reason, you can create your own "paste as plain text" callback function like so:

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);
        });
    }
});

Note: This was created for TinyMCE 3.5.x. Compatibility may vary by version.

Solution 9 - Javascript

if you use a .yml file, add the plugin paste and paste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

Solution 10 - Javascript

I'm not sure this is possible, since "paste as plaintext" actually performs cleanup on the text before it adds it to the window. If you just paste data into the window, no operations can be done. (Unless you hooked into the onChange or something), but they you might end up fixing code that had already been pasted and thus, 'double fixing' it.

Solution 11 - Javascript

I did as follows:

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;
        });
    }
};

And then:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCodeOverloadView Question on Stackoverflow
Solution 1 - JavascriptPaulo AlmeidaView Answer on Stackoverflow
Solution 2 - JavascriptDariusz LysonView Answer on Stackoverflow
Solution 3 - Javascripter-vView Answer on Stackoverflow
Solution 4 - JavascriptstovrozView Answer on Stackoverflow
Solution 5 - Javascriptbrothers28View Answer on Stackoverflow
Solution 6 - JavascriptAsen MitovView Answer on Stackoverflow
Solution 7 - JavascriptlaarskView Answer on Stackoverflow
Solution 8 - JavascriptgfullamView Answer on Stackoverflow
Solution 9 - JavascriptLifterCoderView Answer on Stackoverflow
Solution 10 - JavascriptMitch DempseyView Answer on Stackoverflow
Solution 11 - JavascriptHelgeView Answer on Stackoverflow