Javascript TinyMCE 粘贴为纯文本

TinyMCE Paste As Plain Text

提问by Saim

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

这是网络上 RTE 的常见问题之一。你能指导我如何：

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

1. 粘贴为纯文本
2. 保留 HTML 但删除 WORD/HTML 样式

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

我想直接在粘贴（paste_preprocess 回调）上执行此操作，而无需打开 Paste 插件提供的对话框。

Any thoughts/experiences ?

任何想法/经验？

Thanks,

谢谢，

Imran

伊姆兰

回答by Thariama

This is what i do to get paste plain text.

这就是我为粘贴纯文本所做的工作。

1. paste_preprocess setting (in tinymce init)

1. paste_preprocess 设置（在 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)

2. 函数strip_tags（主文档上）

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

回答by trinth

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

归功于：http: //www.miuaiga.com/index.cfm/2010/1/7/New-TinyMCE-lets-you-paste-as-plain-text-automatically

回答by Mario

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

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

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

或在 django-tinymce 中，在 settings.py 中：

TINYMCE_DEFAULT_CONFIG = {
   'paste_as_text': True,
}

回答by ben

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.

一直在寻找这个。对于 TinyMCE，您可以使用内置粘贴作为文本行为。只需使用以下值设置 tinymce init。

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

资料来源：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;
    });
}

回答by Chris

I used this:

我用过这个：

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

along with

随着

paste_text_sticky: true

回答by Gufran Hasan

I have used @Thariamasolutions but I got one issue.

我已经使用了@Thariama解决方案，但我遇到了一个问题。

In paste_preprocess function:

在 paste_preprocess 函数中：

paste_preprocess : function(pl, o) {
  o.content = StripTags( o.content,'' );
  console.log(o.content);
},

Tinymce returns string as:

Tinymce 将字符串返回为：

Original String:

原始字符串：

"<h1>History.js Test Suite</h1>
        <p>HTML5 Browsers must pass the HTML4+HTML5 tests, HTML4 Browsers must pass the HTML4 tests and should fail the HTML5 tests.</p>"

Returned string:

返回的字符串：

&lt;h1&gt;History.js Test Suite&lt;/h1&gt;<br />?<br />&lt;p&gt;HTML5 Browsers must pass the HTML4+HTML5 tests, HTML4 Browsers must pass the HTML4 tests and should fail the HTML5 tests.&lt;/p&gt;

The best I found that will for both string.

我发现最好的两个字符串。

var $str1 = '&lt;h1&gt;History.js Test Suite&lt;/h1&gt;<br />?<br />&lt;p&gt;HTML5 Browsers must pass the HTML4+HTML5 tests, HTML4 Browsers must pass the HTML4 tests and should fail the HTML5 tests.&lt;/p&gt;';


function StripTags(string) {

  var decoded_string = $("<div/>").html(string).text();
  return $("<div/>").html(decoded_string).text();

}

console.log(StripTags($str1));

Output:

输出：

History.js Test Suite?HTML5 Browsers must pass the HTML4+HTML5 tests, HTML4 Browsers must pass the HTML4 tests and should fail the HTML5 tests.

Reference link

参考链接