tinymce - 知道如何摆脱打印光标，完全卡住了

Question

打印时，光标现在同时显示和打印。而且即使在编辑器外部单击也无法摆脱它 - 它在打印时仍然可见!

它很容易复制，只需文件/打印。

谢谢!

标记

Answer 1

最近，我正在开发一个网络应用程序，我们用 HTML 创建标签，在 TinyMCE 中编辑它们，然后打印它们。我遇到了同样的问题。在他们为此发布补丁之前，您可以尝试以下解决方法。

在您的 TinyMCE init 中使用 BeforeExecCommand 回调将插入符号放入隐藏的 div 中，在我的例子中，我将它放在第一个 div 中:

tinymce.init({...,
  init_instance_callback: function (editor) {
    editor.on('BeforeExecCommand', function (e) {
      if (e.command === 'mcePrint') {
        editor.selection.setCursorLocation(editor.dom.select('div')[0]);
      }
    });
  }
});

然后在 HTML 的开头创建一个 div，类似...

<div style="position: absolute; left: -10000px, top: -10000px; width: 0px; height: 0px; overflow: hidden;"></div>

当您单击“打印”时，将触发回调并将光标置于此隐藏的 div 中，从而将其从 View 中移除，打印内容应如您所愿。

我们可以通过将插入符号放回打印前的位置来改善此处的用户体验。我不会详细介绍，但如果你想这样做，你可以将插入符位置保存在一个变量中，然后在 TinyMCE init 中使用另一个回调:

tinymce.init({...,
  init_instance_callback: function (editor) {
    editor.on('BeforeExecCommand', function (e) {
      if (e.command === 'mcePrint') {
        // Before the print executes, do this...
        // Your code to save the current caret position goes here

        // Move caret to hidden div
        editor.selection.setCursorLocation(editor.dom.select('div')[0]);
      }
    });
  }
  init_instance_callback: function (editor) {
    editor.on('ExecCommand', function (e) {
      if (e.command === 'mcePrint') {
        // After the print executes, do this...
        // Your code to move the caret back to its original position goes here
      }
    });
  }
});