CODEWITHSUNDEEP
javascriptjqueryhtmlcsswysiwyg
TheWelshManc
TheWelshManc

Reputation: 535

Remove Background Color From Pasted Text WYSIWYG

I'm currently working on a WYSIWYG text editor but having a little trouble with one element. Whenever I copy and paste text from a site it will paste with the background color too. I want it so that when it pastes the text, the background color is removed.

Currently I've got a div that can be edited:

<div id="editor" class="comment-section" contenteditable="true" spellcheck="false" tabindex="0"></div>

and then using jQuery I am trying to remove the background color of all children within the div as when I paste text it adds a span to the div:

$('#editor').on('paste', function(e) {
    $(this).children().attr('background-color', 'transparent');
});

But this seems to set the background color of the previous pasted text to transparent but still it doesn't actually remove the background.

Upvotes: 0

Views: 1929

Answers (1)

Gaurav Punjabi
Gaurav Punjabi

Reputation: 153

Similar to the second solution from here: JavaScript get clipboard data on paste event (Cross browser) 

$('#editor').on('paste', function(e) {
    let  pastedData, text;
    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();
    // Get pasted data via clipboard API
    pastedData = e.originalEvent.clipboardData || window.clipboardData;
    pastedData = pastedData.getData('Text');
    text = $(this).text();
    console.log(text, pastedData);
    $(this).text(text+pastedData);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor" class="comment-section" contenteditable="true" spellcheck="false" tabindex="0"></div>

Upvotes: 1

Related Questions