Font Tag issue in summer note

<font style="background-color: rgb(255, 255, 0);" color="#ff0000">Write something</font>

Above tag generated by Summernote; the color property came outside of the style attribute. How can I fix this issue?" anyone found same problem that iam facing if you found let me know it will help me lot

using <span> with a style attribute instead of <font> tags is more modern and widely supported you could override summernote's default behavior for formatting and ensure it generates <span> instead of <font>.

$('#summernote').summernote({
  toolbar: [
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
  ],
  popover: {
    color: [
      ['red', 'green', 'blue'],  
      ['#800000', '#013220', '#00008B'],  
    ],
  },
  callbacks: {
    onChange: function(contents) {
      // replacing <font> tag with <span> tag

      const fixedContents = contents.replace(
        /<font([^>]*?)color="([^"]*?)"/g,
        '<span$1 style="color:$2;"'
      ).replace(/<\/font>/g, '</span>');
      console.log(fixedContents);            // for debugging
    },
  },
});
Вернуться на верх