windowsbrowsertinymceclipboardwysiwyg

How to get full clipboard content including formatting and links?


I copied a text from a website and pasted it into a WYSIWYG editor in Magento 2 Enterprise. The editor automatically detected the right formatting (size, bold, italic...) and even copied links correctly.

If I copy the text into windows notepad instead, then I just get the raw text and all formatting data and links are getting lost.

Is there a way to get the real clipboard data?


I would like to SEE the real content of the clipboard for debugging purposes, I did not asked how to copy it, I already have the data in my clipboard. How is the formatting information/ links etc. stored, how can I inspect it?

There is a bug on Magento 2 where certain content copied from a website and pasted into a text form is breaking the "Page Builder" on save, and I need to analyze it.

Where can I paste it to see the full clipboard content? I need a place which does not remove the formatting like notepad does.


Solution

  • I figured out a workaround. You can paste the content into the tinyMCE editor and then lookup the HTML code. This will show you the full paste content.

    It still remains a mystery though and leaves the question open how tinyMCE can access the full content and I still would like to know the magic behind it.

    For example I copied the following text of my website:

    Was sind RAL-Farben? RAL ist ein europäisches, weltweit genutztes Farbabstimmungssystem, das Farben für Anstriche, Beschichtungen und Kunststoffe definiert. Sie haben Fenster oder Türen in ausgefallenen Farben und brauchen die passenden Insektenschutz-Profile, Alu-Außenfensterbänke oder Zubehörteile? Kein Problem, teilen Sie uns einfach den normierten RAL-Farbcode ihrer benötigten Produkte mit und wir beschichten diese passend für Ihre Anforderungen.

    ... then I pasted the text into tinyMCE and if I inspect the HTML code I get this:

    <div class="pagebuilder-column-group" data-content-type="column-group" data-grid-size="12" data-element="main">
    <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main">
    <div data-content-type="text" data-appearance="default" data-element="main">
    <h2>Was sind RAL-Farben?</h2>
    </div>
    </div>
    <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main">&nbsp;</div>
    </div>
    <div class="pagebuilder-column-group" data-content-type="column-group" data-grid-size="12" data-element="main">
    <div class="pagebuilder-column" data-content-type="column" data-appearance="full-height" data-background-images="{}" data-element="main">
    <div data-content-type="text" data-appearance="default" data-element="main">
    <p>RAL ist ein europäisches, weltweit genutztes Farbabstimmungssystem, das Farben für Anstriche, Beschichtungen und Kunststoffe definiert. Sie haben Fenster oder Türen in ausgefallenen Farben und brauchen die passenden Insektenschutz-Profile, Alu-Außenfensterbänke oder Zubehörteile? Kein Problem, teilen Sie uns einfach den normierten RAL-Farbcode ihrer benötigten Produkte mit und wir beschichten diese passend für Ihre Anforderungen.</p>
    </div>
    </div>
    </div>