Question

我有两个与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

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

Answer 1

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

为什么粘贴时没有可用的文字？

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

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

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

没有

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

最终，这是因为通过 Ctrl + V 粘贴会触发＆＃34;撤消级别＆＃34; - 反过来触发onChange事件 - 而上下文菜单粘贴事件没有（对我来说，这似乎是一个TincyMCE错误）：

当用户键入文本然后移动光标时，会添加撤消级别，执行类似操作，例如在选择文本时按下粗体按钮，或按返回。撤消级别可以通过多种方式添加到编辑器中。

请参阅：TinyMCE documentation for onchange_callback

可以做些什么？

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

这是一个使用＆＃34;粘贴为纯文本的示例＆＃34;回调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);
        });
    }
});

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

Answer 2

我目前使用的是第 5 版，但该问题尚未在库中解决。经过测试的解决方法是使用 setDirty() 方法 (see docs)：

tinyMCE.init({
    setup: function (editor) {
        editor.on('paste cut', function() {
           this.setDirty(true); // this updates the editor.undoManager
        });
    }
});

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

2 个答案:

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