TinyMCE 粘贴为纯文本

Question

TinyMCE 粘贴为纯文本

javascripthtmltexttinymcewysiwyg

41

这是网络富文本编辑器常见的问题之一。请问您能否指导我如何执行以下操作：

以纯文本方式粘贴
保留HTML但删除WORD/HTML样式

我想在粘贴时直接执行此操作（使用paste_preprocess回调），而不必打开Paste插件提供的对话框。

您有任何想法或经验吗？

谢谢，

Imran

- Saim

我认为这将使文本更清晰，但我会欣赏更多的建议/解决方案：http://www.1stclassmedia.co.uk/developers/clean-ms-word-formatting.php - Saim

6个回答

33

实际上，现在你可以这样做：

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

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

- trinth

12

现在有一个新选项，它替换了上面的所有内容:

tinymce.init({
   paste_as_text: true
});

请查看http://www.tinymce.com/wiki.php/Configuration:paste_as_text

或在django-tinymce中的settings.py中查找：

TINYMCE_DEFAULT_CONFIG = {
   'paste_as_text': True,
}

- Mario

有没有办法保留空格？ - Florian Walther

10

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

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

- ben

3

我用了这个：

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

随着

paste_text_sticky: true

- Chris

1

@Chris，你把这些放在哪里了？ - nouveau

这应该与其他选项一起放置在tinyMCe.init({})中。 - Nishant

0

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

在paste_preprocess函数中：

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

Tinymce 返回字符串如下：

原始字符串：

"<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>"

返回的字符串：

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

我发现最好的方法可以同时适用于字符串。

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

输出：

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.

参考链接

- Gufran Hasan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thariama · Accepted Answer

以下是我用来获取纯文本的方法。

1. 粘贴预处理设置（在tinymce初始化中）

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. 去除主文档中的HTML标签函数

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