Tinymce Paste as Plain Text

How to make tinymce paste in plain text by default

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.

TinyMCE Paste As Plain Text

This is what i do to get paste plain text.

1. paste_preprocess setting (in tinymce init)

paste_preprocess : function(pl, o) {
  //example: keep bold,italic,underline and paragraphs
  //o.content = strip_tags( o.content,'<b><u><i><p>' );

  // remove all tags => plain text
  o.content = strip_tags( o.content,'' );
},

2. function strip_tags (on the main document)

// Strips HTML and PHP tags from a string 
// returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
// example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');
// returns 2: '<p>Kevin van Zonneveld</p>'
// example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
// returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>'
// example 4: strip_tags('1 < 5 5 > 1');
// returns 4: '1 < 5 5 > 1'
function strip_tags (str, allowed_tags)
{

    var key = '', allowed = false;
    var matches = [];    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = ''; 
    var replacer = function (search, replace, str) {
        return str.split(search).join(replace);
    };
    // Build allowes tags associative array
    if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
    }
    str += '';

    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
    // Go through all HTML tags
    for (key in matches) {
        if (isNaN(key)) {
                // IE7 Hack
            continue;
        }

        // Save HTML tag
        html = matches[key].toString();
        // Is tag not in allowed list? Remove from str!
        allowed = false;

        // Go through all allowed tags
        for (k in allowed_array) {            // Init
            allowed_tag = allowed_array[k];
            i = -1;

            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
            if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}

            // Determine
            if (i == 0) {                allowed = true;
                break;
            }
        }
        if (!allowed) {
            str = replacer(html, "", str); // Custom replace. No regexing
        }
    }
    return str;
}

Tinymce 4: how to allow converting pasted content to plain text AND to normal mode

When you load the paste plugin by default it adds two items to the Edit menu:

• Paste
• Paste as Text

...so what you want is a standard part of the paste plugin. In TinyMCE 4 its exposed via the Edit Menu and not the Toolbar.

EDIT #1: If you add the pastetext button to the toolbar that allows you to toggle the paste function between Paste as Text and regular Paste. The button toggles the behavior that happens on a paste event. It does not behave exactly as things did in TinyMCE 3 (the behavior you describe in your question).

EDIT #2 - Programmatically changing this behavior

You can use code to toggle this setting but you need a couple of different calls to get what you need.

First, you need to determine what the current "mode" is for the paste plugin. For this you can use:

tinymce.activeEditor.plugins.paste.clipboard.pasteFormat

This will (based on the current TinyMCE release of 4.6.5) return one of three values: "html", "text", or undefined. I believe it always starts as undefined until you initiate the toggle once.

If you want to switch the behavior to the other mode you can do this:

tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');

Note that is is a toggle - so whatever it was set to it will switch to the opposite mode. There is no exposed method call that you can use to force it to one mode or the other.

Tinymce paste includes styles

For some odd reason, nothing I did work in the latest tinymce. I hope this helps someone else who runs into this

  cleanup_on_startup : true,
  fix_list_elements : false,
  fix_nesting : false,
  fix_table_elements : false,
  paste_use_dialog : true,
  paste_auto_cleanup_on_paste : true,

I had to paste these in the init function. This allows for it to post plain text and then when the user places styles like centering it adds a paragraph tags around the specified text

---

Related Topics