Tui.editor: Disable HTML and force MD on copy-paste

[DRSDavidSoft]

Version

v1.1.0 – Chrome, example docs

Request description

Currently, if some rich-text content is copied from the web and pasted into tui editor, some HTML wrappers (<span> with color and etc) are created.

Is there a way to disable HTML creation and force override using markdown on pasted text?

[kyuwoo-choi]

Hey @DRSDavidSoft

I assume you're trying to paste rich clipboard data into the WYSIWYG editor.
And I don't follow what "force override using markdown" means.
Could you give me more explanation?

[DRSDavidSoft]

@kyuwoo-choi Thanks for getting back to me

I'm sorry if I was ambiguous, but your assumption is correct, I'm talking about clipboard data.

By "force override using markdown" I mean an option to allow the following:

• Remove all <b>/<strong>, <i>/<em>, <u> HTML tags and replacing them with corresponding markdown syntax, such as **text**, _text_, and etc. on pasting clipboard data.
• Disallow creation of <span> tags with style attributes color or font-family set, when data from clipboard is pasted.

In general, I'd like to avoid any HTML code being introduced into my production database when user is using tui editor.

Does currently an option exist to disable all HTML creation on copying rich data from the clipboard? If not, could I request this to be added?

[kyuwoo-choi]

@DRSDavidSoft No worries.

Ok. to be clear,

And there is an API getValue() which returns Markdown text.
You paste <strong>text</strong> on WYSIWYG, you get **text** from getValue().

But I can't help with <span> with color style as it has no corresponding Markdown syntax.

The option I can think of is that you get Markdown text content through getValue() then strip out the span.

[RoccoHoward]

I have this same issue.

I want to remove all html from anything being pasted (I've had it paste html which had the text color set to white, argh!). Biggest issue is attempting to maintain the newlines - without the html.replace bit of code, it pastes it one long line.

Here's something I've written (needs more testing of various cases, but is suitable so far).

.on('pasteBefore', function(event) {
    var html = event.$clipboardContainer.html();
    html = html.replace(/<div>/g, "\r\n\r\n");
    var doc = new DOMParser().parseFromString(html, 'text/html');
    html = doc.body.textContent || "";
    event.$clipboardContainer.html(html);
});

Now, the problem with this is the te-editor container doesn't update visually with the updated html. The Markdown is correct and I toggle between the modes, it re-renders the WYSIWYG view correctly (is there a way to get this view to reload itself?)

[sohee-lee7]

@RoccoHoward This issue is old so please make a new issue for your issue. Before make a new issue, please check using the latest version.

[RoccoHoward]

@sohee-lee7 Thanks for the reminder about this one. I'll have to look at it again.

Currently running v1.2.5

About to take the app into production so will update to latest and see.

[sohee-lee7]

@RoccoHoward Thanks for your quick reply. I will close this issue. If you have still same problem, please make a new issue :)

[Jbithell]

@RoccoHoward did you find a solution to this in the end?

[maaarghk]

@Jbithell @RoccoHoward bit behind the times here, but I found the issue with the wysiwyg not reflecting the updated paste doesn't exist anymore, and the following was better, because it stripped colour specifically but still allowed bold, italic etc. - and crucially, doesn't break the table plugin, which i required.

this.$refs.tuiEditor.editor.eventManager.listen('pasteBefore', function(event) {
    var html = event.$clipboardContainer.html();
    var doc = new DOMParser().parseFromString(html, 'text/html');
    doc.querySelectorAll('span').forEach(function(el) {
        el.outerHTML = el.textContent;
    });
    html = doc.body;
    event.$clipboardContainer.html(html.outerHTML);
});

[oreporan]

Any ideas how to get the eventManager in the react-editor?