Search code examples
javascriptfroala

Froala strips inline styles when using html.insert


When I use the html.insert function with Froala, it strips inline styles.

Editor intiliazation looks like

        $('.fr-view').froalaEditor({
        // Set custom buttons with separator between them.
        toolbarButtons: ['paragraphFormat', 'bold', 'italic', 'strikeThrough', 'formatOL', 'formatUL', 'clearFormatting', 'link', 'unlink', 'myButton', 'image', 'blockquote', 'html'],
        paragraphFormatSelection: true,
        refreshAfterCallback: true,
        imageEditButtons: ['replaceImage', 'imageDisplay', 'imageAlign', 'imageRemove'],
        linkEditButtons: ['linkOpen', 'linkRemove'],
        linkNoReferrer: false,
        htmlAllowedTags: ['.*'],
        htmlRemoveTags: ['']

    });

Html Insert function looks like:

$('.fr-view').froalaEditor('html.insert', '<a href="' + imgLink + '" target="_self" ><img src="' + finalImgSrc + '" style="' + imgStyle + '" alt="' + altTitle + '" title="' + altTitle + '" /></a>', true);

Anyone have any idea why inline styles get stripped?


Solution

  • Found a solution for anyone else that has a similar problem. It came down to a couple of options when initializing the editor. Here is what that looks like now:

            $('.fr-view').froalaEditor({
            // Set custom buttons with separator between them.
            toolbarButtons: ['paragraphFormat', 'bold', 'italic', 'strikeThrough', 'formatOL', 'formatUL', 'clearFormatting', 'link', 'unlink', 'myButton', 'image', 'blockquote', 'html'],
            htmlAllowedStyleProps: ['font-family', 'font-size', 'background', 'color', 'width', 'text-align', 'vertical-align', 'background-color', 'float'],
            paragraphFormatSelection: true,
            refreshAfterCallback: true,
            htmlUntouched: true,
            imageEditButtons: ['replaceImage', 'imageDisplay', 'imageAlign', 'imageRemove'],
            linkEditButtons: ['linkOpen', 'linkRemove'],
            linkNoReferrer: false,
            htmlAllowedTags: ['.*'],
            htmlRemoveTags: ['']
    
        });
    

    htmlUntouched and htmlAllowedStyleProps