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?
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