TinyMCE 讓編輯器可以放置有 script 的媒體方法

最近遇到一個案子需要在 TinyMCE 中嵌入如 TikTok 的媒體。

例如

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@barbin1106/video/7313145378650574085" data-video-id="7313145378650574085" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@barbin1106" href="https://www.tiktok.com/@barbin1106?refer=embed">@barbin1106</a> <p>变装再来一次</p> <a target="_blank" title="♬ 原声 - 百变的芭比👯👯 - 芭比💃💃" href="https://www.tiktok.com/music/原声-百变的芭比👯👯-7313145397211024133?refer=embed">♬ 原声 - 百变的芭比👯👯 - 芭比💃💃</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

在預設的狀態下 script 與裡面的一些 attributes 會被 TinyMCE 基於系統安全過濾掉。因此參考網友方法:https://stackoverflow.com/questions/24614301/script-tags-in-tinymce-fields-are-not-saving-correctly

增加以下三個參數就解決了

tinymce.init({
            // ....
            allow_script_urls: true,
            valid_elements: '*[*]',
            extended_valid_elements: 'script[language|type|src]',

參考官方說明

發表迴響