TinyMCE Paste As Plain Text

Question

This is one of the common issue with RTEs on web. Could you please guide me through how to:

1. Paste as the PLAIN TEXT
2. Retain the HTML but remove the WORD/HTML styling

I want to do it directly on paste (paste_preprocess callback), without opening the dialogs provided by Paste plugins.

Any thoughts/experiences ?

Thanks,

Imran

Solution 1

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

Solution 2

Actually, you can now just do this:

plugins: 'paste',
...
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,

Credit goes to: http://www.miuaiga.com/index.cfm/2010/1/7/New-TinyMCE-lets-you-paste-as-plain-text-automatically

Solution 3

There is now a new option that replaces all of the above:

tinymce.init({
   paste_as_text: true
});

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

or in django-tinymce, in the settings.py:

TINYMCE_DEFAULT_CONFIG = {
   'paste_as_text': True,
}

Solution 4

Was looking all over for this.. For TinyMCE, you can use the builtin paste as text behavior. Just set up the tinymce init with the below values.

Source: jerome.chevreau, http://www.tinymce.com/forum/viewtopic.php?id=6788

//add paste plugin
plugins : 'paste',
//Keeps Paste Text feature active until user deselects the Paste as Text button
paste_text_sticky : true,
//select pasteAsPlainText on startup
setup : function(ed) {
    ed.onInit.add(function(ed) {
        ed.pasteAsPlainText = true;
    });
}

Solution 5

I used this:

    oninit: function (ed) {
        ed.pasteAsPlainText = true;
    }

along with

paste_text_sticky: true

View more solutions

Comments

[Saim]

Wow! Thanks Thariama. From where can I get the "replacer" definition?

[Thariama]

you just enter the tags you want to keep in the strip_tags call

[Admin]

This is the only solution I have found that removes all tags. The past plugin only has options to remove styling.

[petko_stankoski]

@Thariama What to do if you want multiple tags as the second parameter of strip_tags()?

[Thariama]

@Scree: it's in the code above: strip_tags( o.content,'<b><u><i><p>' );

[Istiaque Ahmed]

@Thariama, mayI request you to have a look at a tinyMCE question here stackoverflow.com/questions/15386834/… ?

[nouveau]

@Chris, where exactly did you place these?

[Nishant]

This should be placed in the tinyMCe.init({}) along with other options .

[Bilal Rabi]

its working v nice. but when i paste the text the window scroll to top or jump to start of document? what can it be?

[Thariama]

the jumping won't have to do with the code in my answer. It might be that on your webpage the tinymce ditor looses focus and resets it when it inserts the pasted content

[Florian Walther]

Is there a way to keep the spaces?