Any idea how to get rid of printing cursor, totally stuck

Viewed 235

When printing the cursor is now being both displayed and printed. And you can't get rid of it even by clicking outside the editor - its still visible when printing!

Its easy to reproduce, just File/Print.

Thank you!

Mark

2 Answers

Recently, I was developing a webapp where we were creating labels in HTML, editing them in TinyMCE, and then printing them. I came across the same issue. Until they issue a patch for this, you can try the following work around.

In your TinyMCE init use a BeforeExecCommand callback to place the caret into a hidden div, in my case, I'm putting it in the first 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]);
      }
    });
  }
});

Then create a div at the beginning of the HTML, something like...

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

When you click 'Print' the callback will fire and place the cursor into this hidden div thus removing it from view and the printed content should look as you would expect.

We could improve the UX here by putting the caret back where it was before printing. I won't go into much detail, but if you wanted to do that you can save the caret position in a variable and then use another callback in the 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
      }
    });
  }
});

I just wanted to let everyone know that this is a bug in TinyMCE. A quick fix is to add the following styles to the content css:

@media print {
    .mce-visual-caret {
        display: none;
    }
}

Here is a working example https://fiddle.tiny.cloud/baaaab

Related