0

I would like to copy/paste text from MS Excel into my mxGraph editor in order to label nodes and edges.

Problem: The copied cell content from Excel comes with a lot of CSS styling, so for example it looks like this:

<!--table
{mso-displayed-decimal-separator:"\,";
mso-displayed-thousand-separator:\00A0;}
@page
{margin:.75in .24in .75in .24in;
mso-header-margin:.31in;
...
-->

Actual cell string

I would like to strip all the styling and only insert the raw text. In MS Word this behaviour is known as "Match Destination Formatting".

I am aware I can disable HTML labels completely using

mxGraph.prototype.htmlLabels = false;

However, I still want the labels to wrap which seems to require HTML labels.

What is the best approach to intercept the paste event and cleanup the string before it gets inserted as label?

Boris
  • 338
  • 2
  • 20
  • I'm not sure this is a mxgraph question. And this is not exactly CSS here in your example. You can intercept the paste event on the textarea and... off the top of my head... I would take the content, put it in an invisible
    and use .innerText to get only the "visible" part of the text.
     – Colin Claverie Mar 31 '17 at 14:04
  • Thanks for your reply. I would like to modify the content of the clipboard right before pasting it as label of a mxCell. I know how to modify the string in order to strip away the CSS comments, my question is about which event I should use to _hook_ this action in. So I am not clear how to "intercept the paste event on the textarea". Any help is very much appreciated. – Boris Apr 03 '17 at 07:51

1 Answers1

-1

This answer is not related to mxGraph. My practical answer would be to use the "raw" pasting.

Ctrl + C = Copy the content

Ctlr + Shift + V = Paste only the text content (without formatting)

Take a look at this.

ItsJ0el
  • 55
  • 1
  • 5
Danipol
  • 79
  • 1
  • 5
  • Thanks for your reply, but I was rather looking for a general solution working on Mac, too. – Boris Jul 11 '17 at 08:19
  • Maybe you could use `mxGraph.convertValueToString` (https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.convertValueToString)? – Danipol Jul 11 '17 at 09:45
  • The goal is to find the right Javascript event to intercept the pasting so the CSS can get stripped away prior to labeling the node. `convertValueToString` returns the textual representation of the cell. – Boris Jul 12 '17 at 19:11