TinyMCE从剪贴板

时间:2017-03-17 10:26:33

标签: javascript tinymce tinymce-4

我试图通过其他功能来定制TinyMCE 我想在菜单中添加两个额外的项目 - 粘贴HTML并复制HTML。

setup内,我添加了两个菜单项:

editor.addMenuItem('htmlPaste', {
  text: 'Paste HTML',
  icon: 'paste',
  context: 'file',
  onclick: function() {
    tinymce.activeEditor.setContent('<span>some</span> html');
    editor.notificationManager.open({
      text: 'HTML pasted.',
      type: 'info',
      timeout: 2000,
      closeButton: false
    });
  }
});
editor.addMenuItem('htmlCopy', {
  text: 'Copy HTML',
  icon: 'copy',
  context: 'file',
  onclick: function() {
    editor.notificationManager.open({
      text: 'HTML copied.',
      type: 'info',
      timeout: 2000,
      closeButton: false
    });
  }
});

缺少部分是剪贴板访问。我正在考虑使用clipboard.js,但我意识到TinyMCE有这个版本,但它复制并粘贴普通内容而非HTML源。

我可以使用TinyMCE的内置功能来访问剪贴板吗?所以,当我点击Paste HTML时,TinyMCE将更新内容的基础源代码,当我点击Copy HTML时,TinyMCE会将源代码复制到剪贴板(这里我想添加一些修改(替换标签)之前设置剪贴板内容)。

我想使用此功能,因为当用户禁用剪贴板访问时,TinyMCE支持回退。

这是我在codepen上的原型:http://codepen.io/anon/pen/EWbpyr

修改 通过GitHub查找我发现了一些有用的功能,如setClipboardData,但我仍然不知道如何从我的代码中调用它。

1 个答案:

答案 0 :(得分:0)

我认为你不能在大多数现代浏览器上做你想做的事。

如果您尝试使用TinyMCE中的内置剪切/复制/粘贴按钮,您会在大多数浏览器中看到这一点:

  

“您的浏览器不支持直接访问剪贴板。请   请改用Ctrl + X / C / V键盘快捷键。“

正如来自编辑的消息所说,这仅仅限制了某些浏览器中您可以/不能直接通过JavaScript执行的操作。

想象一下,如果您的任意JavaScript可以随时访问剪贴板,您可以做些什么? “糟糕的人”不遵守规则,所以如果(在加载网页时)他们有JavaScript从剪贴板中抓取所有东西并将其发送到他们的服务器?随着时间的推移,浏览器制造商意识到直接访问剪贴板是“糟糕的”......通过让用户键入CRTL + C和CRTL + V,您实际上是在告诉浏览器您希望它访问剪贴板。

IE11确实允许通过旧版API进行访问,但Edge目前根本不支持剪贴板API(至少在我写这篇文章时不支持)。