Question

I have a div with contexteditable set to true and with a special google web font set. Now, when the user pastes in text from a different source which has a different font, it shows up in that different font in my div, how can I change the font to the default font of my div when the text is pasted in?

jQuery would be best, but, I don’t like plugins much.

Answer 1

Updated link: http://jsfiddle.net/Kai/vkbuq/

It strips out the font-family styling included with the paste. Obviously you could also explicitly change it to something else, but removing it altogether forces it to inherit whatever font you have styled on the doc/div:

Vanilla JS:

var div = document.getElementById('myDiv');

div.addEventListener('keyup', function () {
    this.innerHTML = stripFont(this.innerHTML);
});

function stripFont (html) {
    var re = /(font-family:\s?[\"\'A-Z0-9\s]+);/ig;
    return html.replace(re, '');
}

jQuery:

$('#myDiv').bind('keyup', function () {
    var $this = $(this);

    $this[0].innerHTML = $this[0].innerHTML.replace(/(font-family:\s?[\"\'A-Z0-9\s]+);/ig, '');
});