默认情况下如何使tinymce粘贴为纯文本


103

Google对其进行了数千次搜索,没有人提供一个完整的解决方案,说明如何使Tinymce默认情况下以纯文本粘贴并删除任何格式而无需单击“粘贴为文本”按钮。

关于如何实施的任何想法?或如何自动启用“粘贴为文本”按钮?

谢谢

Answers:


59

编辑:此解决方案适用于3.x版,对于4.x版,请阅读@Paulo Neves的回答

问题在于,粘贴插件会自动在每个粘贴上重置纯文本粘贴。所以我们需要做的-重新设置。以下代码将有所帮助。

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

....
});

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

所以现在总是很简单。


我认为这是因为缺少我创建的工作示例粘贴插件-看一下92.248.232.12/tinymce/examples/simple.html tinyMCE.init({... oninit:“ setPlainText”,插件:“ paste” .. ..});
er-v 2010年

5
很好的答案,尽管我发现我遇到了与“ ed”的定义有关的JS错误。只需删除tinyMCE.get(“ elm1”)行并将ed作为setPlainText方法的第一个参数即可解决,例如:“ function setPlainText(ed){...”。
drmonkeyninja 2012年

8
在tinymce的更高版本中,添加了一些选项来解决此问题。paste_text_sticky_default: true并且paste_text_sticky: true在您的配置中应该可以解决问题。(我使用的是3.5.0.1)
Greg

@ er-v关于如何使用表单持久保存tinyMCE格式的字符串的任何建议: stackoverflow.com/questions/17247900/...
codeObserver

13
刚刚尝试过.init({ plugins: ["paste"], paste_as_text: true }),它与TinyMCE 4.1一样具有魅力,而无需其他功能。
雷米·布雷顿

149

对于tinyMCE 3X或4X,情况有所变化。现在您可以执行此操作,并且效果很好。

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

5
是的,其他方法不起作用,但是可以。
蒂姆(Tim)

2
@Tim在此问题的答案中显示的方法是特定的TinyMCE3.x。如果您使用的是TinyMCE 4或更高版本,则可以使用此答案中的方法。
Leonardo Montenegro

TinyMCE中几乎所有内容都有一个插件或选项。.怪不得它是最好的!
supersan '02

1
谢谢您的解决方案,但这实际上意味着我必须记住每次插件更新时都要编辑配置文件吗?
Mike

84

我已经用这段代码解决了这个问题

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

11
对于它的价值,我认为您的解决方案比所选答案更好。
arikfr 2010年

@Dariusz Lyson,关于如何使用表单保留tinyMCE格式化的字符串的任何建议?:stackoverflow.com/questions/17247900/...
codeObserver

9
我收到一个JavaScript错误,该onInit属性ed未定义。Unable to get property 'add' of undefined or null reference
蒂姆(Tim)

35

自己就碰到这个,发现从TinyMCE 3.4.2开始,您可以:

paste_text_sticky: true,
paste_text_sticky_default: true

...很好。


2
对于这些配置选项+1,请不要忘记将粘贴插件添加到插件数组中!
Fredszaq 2012年

3
当我使用这种方法时,编辑器仍允许粘贴非纯文本。
蒂姆(Tim)

7

我认为最简单的方法是这样的:

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

1

使用它不是更好:

var ed = tinyMCE.activeEditor;

代替:

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

我同意,我能够使用activeEditor而不是get('elm1')来使脚本正常工作,我还在答案中发布了您的代码+接受的代码作为答案,而且效果很好
GibboK 2011年

这是针对er-v 答案的评论。这不能为问题提供答案。一旦你有足够的声誉,您就可以在任何帖子中发表评论
所有工人都是必不可少的

1

仅供参考,TinyMCE通过将其实现为粘贴插件中的默认选项进行了改进。更多信息:http ://www.tinymce.com/wiki.php/Plugin: paste

但是,它仍然不是完美的。因此,这是一个脚本,它也会触发所有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', '');
            });

        },

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


1

没有插件:监听粘贴事件,获取剪贴板数据

如果由于某种原因不能使用或不想使用插件,则可以创建自己的“粘贴为纯文本”回调函数,如下所示:

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

注意:这是为TinyMCE 3.5.x创建的。兼容性可能因版本而异。


1
适用于3.x的出色解决方案-在我的情况下,其他任何答复都没有起作用
Rolf Pedro Ernst

1

如果您使用.yml文件,请添加插件pastepaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

-1

我不确定这是否可行,因为“粘贴为纯文本”实际上会在将文本添加到窗口之前对其进行清除。如果仅将数据粘贴到窗口中,则无法执行任何操作。(除非您迷上了“ onChange或”之类的东西),但是它们可能最终会修复已粘贴的代码,因此会对其进行“双重修复”。


-1

我做了如下:

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

然后:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.