WordPress TinyMCE 編輯器打破了我漂亮的 HTML

問題描述

這幾乎完全相同：How to make WordPress and TinyMCE accept tags wrapping block-level elements as allowed in HTML5? 和 HTML5, WordPress and Tiny MCE issue – wrapping anchor tag around div results in funky output

我的問題是建議的解決方案 (tiny_mce_before_init 過濾器) 似乎不能解決我的問題。我有這樣的 HTML：

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

在 HTML5 中完全合法。然而，WP 編輯器不喜歡它並將其轉換為：

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

這當然打破了我的佈局。有人知道我可以防止這種行為嗎？我不能放棄編輯器的視覺元件，並堅持純文字。歡迎任何建議。

為了清楚起見，當我使用下面的程式碼 (suggested here) 時， 標籤被允許保留在錨點內，但是與  實體一起新增了很多額外的空間，每次在 Visual 和 Text 模式之間切換時都會相乘。

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

最佳解決方法

無論您配置為有效孩子，Wordpress 都以非常獨特的方式處理 p 個標籤以及換行符。您最終會注意到，如果您還沒有，從文字編輯器切換到視覺化編輯器，並返回您的 標籤被剝離，類似於前端發生的事情。透過給 標籤一個自定義的類來阻止這種情況的發生。

This p tag won't get removed" 。

雖然↑這個↑將保持你的 p 標籤不被剝奪，它不會解決你的問題，因為你的標記在前端仍然被弄髒。你可以 DISABLE wpautop 。如果你這樣做，並且 p 包含在有效的孩子中，這將會修復你的錯誤。

選項 1：停用 Autop 並設定有效的孩子

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

我應該警告你，第二個從 HTML 編輯器切換回 TinyMCE 你的 HTML 將被破壞。解決方法是針對某些帖子型別完全停用 TinyMCE，如下面的選項 2 。

選項 2：停用自動 P，TinyMCE 和設定有效孩子

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

對於大多數人雖然↑這個↑不是一個選擇。

那麼還有哪些選擇呢？我注意到的一種解決方法是使用跨標籤與類，並確保您的 HTML 標籤之間沒有空格。如果你這樣做，你可以使用上面的選項，並避免一起停用 TinyMCE 。只要記住，您還必須在樣式表中新增一些 CSS，以正確顯示跨度。

選項 3：選項 1 +樣式跨度標籤

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

樣式表中的 CSS

.noautop {
    display: block;
}

選項 4：使用內建的媒體上傳器短碼

我最初忘了這個，但 http://%2520https%3A//github.com/WordPress/WordPress/blob/fdb6bbfa10c2acca0074c4c741f6dff122e3ce1d/wp-includes/media.php%23L1433 短碼將如下所示：


    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption

輸出將如下所示：

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

如果您不想要圖形標籤，您可以使用像 custom content shortcode 這樣的外掛，可以讓你這樣做：

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

為什麼編輯器不能正常工作？

過去幾年，我花了無數小時努力讓這個工作順利。偶爾我會提出一個完美的解決方案，但是 Wordpress 將會推出一個更新，把所有的東西都弄亂了。唯一的解決方案，我曾經發現完全工作如何應該，導致我最好的答案我有。

Option 5 : Preserved HTML Editor Markup Plus

所以儲存自己頭痛，只要走這個。預設情況下，保留的 HTML 編輯器標記加號僅影響新頁面。如果要更改已建立的頁面，則必須訪問 www.example.com/wp-admin/options-writing.php 並編輯外掛設定。您還可以更改預設換行符。

Note: If you do decide to use this make sure you check the support thread when a new wordpress update gets launched. Occasionally, an change will mess things up so it’s best to make sure the plugin works on the newer versions.

額外的信用：除錯你的問題/編輯其他的 Tinymce 選項

如果要手動檢查並輕鬆編輯 TINYMCE 配置，就像使用過濾器一樣，可以安裝 advanced tinymce config 。它允許您檢視所有配置的 TINYMCE 選項，並從簡單的介面進行編輯。您也可以像篩選器一樣新增新選項。它使事情變得更容易理解。

例如，我擁有和保留的 HTML 編輯器標記加號。下面的截圖是 Advanced Tinymce Config 管理頁面。雖然螢幕截圖正在切除真正的 90％的內容，您可以看到它顯示有效的孩子可以編輯，哪些保留的 HTML 編輯器標記加上新增。

這是一個非常有用的方法，不僅可以完全自定義您的編輯器，還可以看到發生了什麼。你可能甚至可以弄清楚導致你的問題的原因。檢視引數後，保留 HTML 編輯器標記已啟用，我看到一些其他選項可以新增到自定義過濾器。

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

不幸的是，這種方法不行。在更新帖子和/或編輯器之間切換時，可能會有一些正規表示式或 JavaScript 。如果您看看儲存的 HTML 編輯器原始碼，您可以看到它在管理端執行一些 JavaScript 工作，所以我最後一點建議是檢查 how the plugin works 如果你想在你的主題中新增這個功能。

無論如何，對於在我的答案中已經得到這麼遠的任何人來說，對不起。只是想我會分享我自己的處理 wordpress 編輯的經驗，所以其他人希望不用花幾個小時來像我一樣想出來！

參考文獻

TinyMCE editor is breaking my beautiful HTML

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress TinyMCE 編輯器打破了我漂亮的 HTML