插件 \ paste 粘贴插件用于从Word复制和粘贴内容的标准版功能。
+toolbar按钮+menu项

此页更新时间:2020-09-24 15:31

此页英文文档:https://www.tiny.cloud/docs/plugins/paste/

此插件将过滤/清除从Word粘贴过来的内容。它的强大之处在于它提供的强大配置,所以请花点时间将本页所有内容阅读完。

tinymce.init({
    selector: '#tinydemo',
    plugins: "paste",
    toolbar: "paste",
});

额外设置

paste_data_images 粘贴data格式的图像

此选项指定是否应从粘贴的内容中删除data:url图像(内联图像)。

例如,火狐浏览器允许将图像直接粘贴到任何ContentEditable字段中。这通常不是人们想要的,所以默认这个选项是“false”。

取值: true / fasle

默认: fasle

paste_data_images: true

paste_as_text 默认粘贴为文本

用于定义菜单项中“粘贴为文本”的默认选中状态,默认下前面没有对勾。

取值: true / fasle

默认: fasle

paste_as_text: true

paste_enable_default_filters 开启默认过滤器

取值: true / fasle

默认: true

paste_filter_drop

取值: true / fasle

默认: true

paste_preprocess

在粘贴的内容被插入到编辑器之前对其进行修改(也相当于自建过滤器)。

取值:function(plugin, args){}

自定义函数传入两个参数:plugin与args,plugin作用未知,args.content是粘贴的内容,主要对args.content进行修改,修改后该函数无需返回值,也就相当于在插入粘贴内容前先执行了该函数。

tinymce.init({
    selector: '#tinydemo',
    plugins: "paste",
    toolbar: "paste",
    paste_preprocess: function(plugin, args) {
        console.log(args.content);
        args.content = 'helloworld';
    }
});

paste_postprocess

在粘贴的内容被解析DOM结构,但在被插入到编辑器之前,对其进行修改。

译者:与上例的不同点,上例args.content是文本,而本例args.node是dom节点,二者提供的操作方式不同,一个修改string,一个修改node对象。注意:该插件还在粘贴的node外围包裹了一个div节点,该div内部才是被复制的节点。

取值:function(plugin, args){}

tinymce.init({
    selector: '#tinydemo',
    plugins: "paste",
    toolbar: "paste",
    paste_postprocess: function(plugin, args) {
        console.log(args.node);
        args.node.setAttribute('id', 'hello');
    }
});

paste_word_valid_elements

该设置在自word粘贴时,允许指定元素和属性保存在过滤结果中。

由于直接复制word会在剪切板中生成大量垃圾代码,因此插件会对其进行额外的筛选,尽可能的令代码整洁。

注意:使用此参数时 paste_enable_default_filters的值应为true ,经测试,当其为false时,此参数无效(与原文的描述相反,bug?)。
此参数仅用于过滤从word粘贴过来的内容,其它地方复制的内容不适用此参数。
tinymce.init({
    selector: '#tinydemo',
    plugins: "paste",
    toolbar: "paste",
    paste_word_valid_elements: "table[width],tr,td[colspan|rowspan|width],th[colspan|rowspan|width],thead,tfoot,tbody,h1,h2,h3,h4,h5,img,p",
});

paste_retain_style_properties

从Word粘贴过来时,允许保留的样式,多个样式属性名用空格分隔。

paste_retain_style_properties: "color font-size"

paste_webkit_styles

指定在WebKit中粘贴时要保留的样式。webkit有一个(讨厌的)bug,它将一个元素的所有css属性计算出来后,强行塞入style属性里,以至于生成的代码及其混乱且低效。

该选项默认为:"none",即全部干掉!也可以指定为"all"全部保留,或指定只保留特定的样式。

取值:"none" / "all" / string(要保留的样式)

默认:"none"

paste_webkit_styles: "color font-size"

下面是一个paste_webkit_styles:"all" 的例子,用于体验垃圾代码有多么严重:

paste_merge_formats

合并相似格式,举例子说的明白:

复制<b>abc <b>bold</b> 123</b>粘贴后变为 <b>abc bold 123</b>

取值: true / fasle

默认: true

paste_merge_formats: false

paste_convert_word_fake_lists

设为false可禁用复制word中的列表内容时,转换为html的UL或OL格式。

取值: true / fasle

默认: true

paste_convert_word_fake_lists: false

paste_remove_styles_if_webkit

设为false可禁用TinyMCE默认针对webkit生成样式的过滤器。

取值: true / fasle

默认: true

paste_remove_styles_if_webkit: false

paste_tab_spaces

5.4新增

此选项用于控制在粘贴制表符时,将制表符转换成空格的个数,如不配置,默认是4个空格。

取值: Number

默认: 4

paste_tab_spaces: 2

smart_paste

机智粘贴功能,目前它能机智的干两件事:

  • 发现看起来像是url的文本就给它加上链接。
  • 发现看起来像是图片地址的东西,然后尝试用图片替换掉这段地址。

默认是开启的,如感觉这货是人工智障,就设为 false 吧。

取值: true / fasle

默认: true

smart_paste: false

Command

Command说明
mceInsertClipboardContent 在光标位置或当前所选内容上触发粘贴事件。该命令需要一个对象:如用content是一个要粘贴进去的html,如用text则是一段纯文本。
mceTogglePlainTextPaste 切换到纯文本粘贴模式,和菜单里点同名选项是一个作用。
tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, {
  content: '<p>Hello, World!</p>'
});
tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');

魔改paste插件,使paste_postprocess能返回原始剪切板数据

在未压缩版源码中查找:

editor.on('paste', function (e)

在其匿名函数内新增一行:

editor.plugins.paste.e = e;

下一节:preview 预览