Deprecated HTML tags such as <font> are used in Summernote

Tags such as <font> were deprecated many moons ago and are not supported in HTML5. I believe Summernote’s success depends on it producing the cleanest, minimalist and best practise HTML known to mankind.

steps to reproduce

1. Write some text
2. Use the font colour tool to change the text colour
3. View the HTML and see the <font color="#00ff00">example</font> in all its glory

In this I would suggest <span style="color: #0f0">example</span> should be used. I see that in other places Summernote does use inline styles like this so I think this should be consistent across the font colour styles too.

Whether or not <font> works, this is a question of style and making Summernote not appear like one of the old-school text editors.

[renetanikolova]

I don’t know if someone needs an alternative, but I found one:

Using sanitizer works perfectly for me: https://www.npmjs.com/package/sanitize-html-react

And specifically for the font tag: there is an option to replace it:

here is a simple example (I am using React):

import sanitizeHtml from 'sanitize-html-react';

let dirty = '<p>a nesty example &nbsp; &nbsp;</p><p><br></p><p><br></p><p><font face="Gilroy Light">Gilroy Light</font></p><p><font face="Gilroy Light"><br></font></p>';
        
let clean = sanitizeHtml(dirty); // some basic cleaning

clean = sanitizeHtml(dirty, {
    allowedTags: false,
    allowedAttributes: false,
    transformTags: {
        'font': function (tagName, attribs) {
                return {
                    tagName: 'span',
                    attribs: {
                        style: "font-family:'" + attribs.face + "';"
                    }
                };
        }
    }
});

Setting flags: allowedTags: false, allowedAttributes: false allows all tags and attributes. If you need to allow only a specific set of tags and attributes, there are examples in the documentation.

I hope that would help some of you!

Best wishes, Reneta

[DiemenDesign]

This has been added to the Projects List, you can check the progress here https://github.com/summernote/summernote/projects/2