Froala Editor removing empty span tags

Question

I am using Froala Editor to edit certain content on my website. Everything works great except when I insert icons using <span></span> it automatically removes the span. Now, I know this is a feature to keep the code clean but according to the docs: https://editor.froala.com/options#allowedEmptyTags span should be able to be empty by default. I am not sure exactly how to add the Froala allowEmptyTags parameter but this was my attempt below:

          $('#edit').editable({
            allowedEmptyTags: ["span", "table"],
            inlineMode: false,  
            buttons: ["bold", "italic", "underline", "strikeThrough", "fontSize", "color", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "selectAll", "createLink", "anchor", "insertImage", "insertVideo", "undo", "redo", "html"], 
            blockTags: ['p'], 
          }

Answer 1

Because of the way styles are applied, empty spans will always be removed. You can use a div instead to avoid that.