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

粘贴时为什么没有文本？

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

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

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

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

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

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

See this JSFiddle for a working example.

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

解决方法:

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

Why isn’t the text available on paste?

After pasting text into the editor, the content is visible in the editor, but not available via the .getContent() method. Why?

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

Can I force TinyMCE to get the text it is displaying in the editor during this event?

没有.

Why does Ctrl+V trigger a change event, but context menu paste does not?
…
Why the difference?

最终,这是因为通过Ctrl V粘贴会触发“撤消级别” – 这会触发onChange事件 – 而上下文菜单粘贴事件则不会(对我来说,这看起来像是TincyMCE错误)：

Undo levels are added when the user types text and then moves the cursor, performs an action like pressing the bold button while having text selected, or pressing return. There are many ways undo levels get added to the editor.

见：TinyMCE documentation for onchange_callback

What can be done about this?

您可以侦听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开发人员常用的解决方案,因此在这方面包含它可能会有所帮助.