TinyMCE onPaste没有设置内容,粘贴上下文菜单不会触发更改事件

Question

关于TinyMCE(v.3.5.11)默认粘贴功能,我有两个相关的问题:

粘贴时为什么没有文本？

将文本粘贴到编辑器后,内容在编辑器中可见,但不能通过该.getContent()方法获得.为什么？

在此活动期间,我可以强制TinyMCE获取它在编辑器中显示的文本吗？

为什么Ctrl+会V触发更改事件,但上下文菜单粘贴却没有？

如果使用键组合Ctrl + V将文本粘贴到编辑器中,onPaste则会触发第一个TinyMCE的事件,并且文本不可用.getContent()(如上所述); 紧随其后,onChange事件被触发,现在可以通过该.getContent()方法获得文本.

但是,如果您通过右键单击鼠标将文本粘贴到编辑器中,然后从上下文菜单中选择粘贴,onPaste则会触发TinyMCE的事件,但不会onChange.

为什么不同？关于这个还能做什么？

有关工作示例,请参阅此JSFiddle.

注意:我没有使用粘贴插件,所以请不要提供它或任何其他插件作为答案.我有兴趣创建自己的解决方案.

Answer 1

收听粘贴事件,获取剪贴板数据

粘贴时为什么没有文本？

将文本粘贴到编辑器后,内容在编辑器中可见,但不能通过该.getContent()方法获得.为什么？

我不知道为什么,但显然通过上下文菜单粘贴不会触发TinyMCE中的更改事件.根据我的观察,编辑器中的文本被TinyMCE缓存并且仅在onChange事件期间更新.因此即使文本是可见的,它也没有被TinyMCE缓存,因此.getContent()返回最后一个缓存的值(或者undefined如果还没有缓存的话).

在此活动期间,我可以强制TinyMCE获取它在编辑器中显示的文本吗？

没有.

为什么Ctrl+会V触发更改事件,但上下文菜单粘贴却没有？ ...为什么不同？

最终,这是因为粘贴via Ctrl+ V会触发"撤消级别" - 这反过来触发onChange事件 - 而上下文菜单粘贴事件不会(对我来说,这看起来像是TincyMCE错误):

当用户键入文本然后移动光标时,添加撤消级别,执行类似操作,例如在选择文本时按下粗体按钮,或按返回.撤消级别添加到编辑器的方法有很多种.

请参阅:TinyMCE文档onchange_callback

关于这个还能做什么？

您可以侦听onPaste事件并绑定回调函数以直接从剪贴板获取文本并将其插入编辑器.使用该.execCommand()方法插入内容将触发撤消级别,onChange即使通过上下文菜单粘贴也会触发事件.

以下是使用"粘贴为纯文本"回调的示例onPaste:

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

注意:当然,您不必将此功能"粘贴为纯文本".如果要保留格式,可以选择从剪贴板中获取完整的HTML,但是在此答案范围之外,您会遇到其他跨浏览器兼容性问题.粘贴为纯文本需要较少的代码行,因此它更适合于Stack Overflow应答中的示例.它也恰好是TinyMCE开发人员常用的解决方案,因此在这方面包含它可能会有所帮助.