Issue
TinyMCE, CKEditor, and Froala allow you to copy-paste HTML tables (e.g. from an email or Wikipedia) directly into the HTML textarea and the HTML table structure and tags are preserved.
For an additional example, my web-based email client can also do this. I can copy an HTML table from an email I received into an email I am sending, and the table structure will be preserved.
I understand that these editors are not just HTML textareas, rather they are rich text editors. My question: What browser capabilities allow for rich text editing? How do they do this?
From what I can tell, every time I copy-paste some HTML into a textarea, the browser strips out all HTML tags.
Solution
Here's a minimal answer. Thank you to Andrew Gillis for directing me to the CKEditor source code that had something similar.
<html>
<head>
</head>
<body>
<textarea class="rich" cols="40" rows="8"></textarea>
</body>
<script>
const target = document.querySelector('textarea.rich');
target.addEventListener('paste', (event) => {
const clipboard_data = (event.clipboardData || window.clipboardData);
const text_paste_content = clipboard_data.getData('text/plain');
const html_paste_content = clipboard_data.getData('text/html');
// This what we see by default
console.log(text_paste_content)
// This is the raw HTML that can be used to make "rich" content
console.log(html_paste_content)
});
</script>
</html>
When you paste into the textarea, you will have access to the raw HTML through the html_paste_content variable.
Answered By - Chris Conlan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.