TinyMCE は、style 属性が自動的に削除されないように HTML コードを貼り付けます_html/css_WEB-ITnose

TinyMCE は、style 属性を含む HTML コードを貼り付けるときに、style 属性を自動的にクリアします。extended_valid_elements の設定は、Chrome ではなく、Firefox ブラウザーでのみ機能します。

extended_valid_elements: 'div[style|class|id]'

Chrome上でinline_styles: true, schema: 'html5'を設定してもダメ

仕方なくTinyMCEのソースコードを見て、プラグイン内のペーストを削除しても、スタイルは削除されないことがわかりました。最後に、plugin/paste/plugin.js で次のコードを見つけました。

function addPreProcessFilter(filterFunc) {            editor.on('BeforePastePreProcess', function(e) {                e.content = filterFunc(e.content);            });        }

ここでフィルタリングされていると推定されます。 filterFunc 関数を見つけました:

// Sniff browsers and apply fixes since we can't feature detect        if (Env.webkit) {            addPreProcessFilter(removeWebKitStyles);        }        if (Env.ie) {            addPreProcessFilter(removeExplorerBrElementsAfterBlocks);        }

これを見たとき、TinyMCE は本当にこんなものですか? Webkit と IE を直接検出するだけで、Firefox は無視されますか? TinyMCE の開発者が Firefox ブラウザーをまったく考慮していなかったため、Firefox でのスタイルが維持されました。これは本当にでたらめでした。

removeWebKitStyles 関数内:

// Filter away styles that isn't matching the target node            var webKitStyles = editor.settings.paste_webkit_styles;            if (editor.settings.paste_remove_styles_if_webkit === false || webKitStyles == "all") {                return content;            }

明らかに、この属性を設定するだけです

paste_webkit_styles: true

TinyMCE のソース コードを見てみると、非常に書き方が悪く、グローバル変数にマークが追加されていません。混在するローカル変数、関数、ステートメントを区別します。