javascript - Froala 在使用 html.insert 时去除内联样式

Question

当我将 html.insert 函数与 Froala 一起使用时，它会去除内联样式。

编辑器提示看起来像

        $('.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 插入函数如下所示：

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

任何人都知道为什么内联样式会被剥离？

标签： javascriptfroala

Answer 1

为其他有类似问题的人找到了解决方案。初始化编辑器时，它归结为几个选项。这是现在的样子：

        $('.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 和 htmlAllowedStyleProps