WordPress 視覺化編輯器剝離 HTML 更改

問題描述

當我使用 WordPress HTML 編輯器新增如下的 icomoon 圖示：

<span class="icon-shield"></span>

然後切換到視覺化編輯器，然後切換到 HTML 編輯器，圖示消失。我試圖包含 this bit of Javascript 來解決這個問題。我看著 wp_enqueue_scripts 並將其放在 functions.php 中，但仍然無法解決問題。

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

如何解決這個問題？

最佳解決辦法

背景

此問題是關於在儲存 Visual 和 Text 編輯器選項卡之間保留帖子或切換之間，刪除 TinyMCE 中的空 元素。核心功能 (中繼版本 4.0-alpha-20140602) 是固有的問題，並且透過標準的 WordPress API 不可更改，如 ticket #26986 中所述。該票詳細說明瞭設定背後的原因，並標記為 wont-fix，這意味著您最好的選擇是下列”work-arounds” 之一。

預設 WordPress /TinyMCE 行為

預設情況下，WordPress 的 TinyMCE 例項被配置為使得刪除某些屬性的空標籤或標籤的數量，以消除不執行任何操作的標記。

來自 MDN 的 檔案：

The HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate.

由於 旨在對內容元素/內容進行分組，因此 WordPress 核心貢獻者已經決定，當標記為空時，元素必須無關緊要，因此從內容中刪除它們。

Work-Arounds

在大多數情況下，修改 TinyMCE 配置的正確方法是使用過濾器掛接到 tiny_mce_before_init，但是 span 的 empty-removal 行為無法以此方式進行修改。這樣做可能需要對核心檔案的駭客，因此我沒有提供任何這樣的解決方案來考慮。

理想：給`` 螢幕閱讀器文字

螢幕閱讀器是試圖解釋 on-screen 內容的軟體，以幫助 visually-impaired 。處理網頁時，大多數螢幕閱讀器可以完全停用 CSS(和 Javascript)，也可以處理一個 sub-set，這樣通常會被 CSS 隱藏的東西最終會像處理一樣被看到。 Web-devs 傳統上以可訪問性的名義利用這種行為，透過建立一個 CSS 類，可以應用於將隱藏所有啟用了 CSS 的人的元素 something along the lines of：

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

有了這個課程 (你的主題的樣式表可能有一個類似的類)，在你的圖示跨度內，你可以新增一個不能 (或至少看起來像) 呈現 on-screen 的”screen-reader” 跨度，但會為螢幕閱讀器提供可訪問替代您的圖示，類似於 alt 屬性在<img> 上的工作原理：

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

當 CSS 啟用時，上述將顯示您的圖示，螢幕閱讀器會在其位置解釋”Security” 。

給`` 隱形內容

為了防止 被剝離，您可以新增未明確顯示的內容：

在開始和結束標籤之間新增空格字元就足夠了。但是，當空白空白被刪除時，您需要透過  HTML 實體新增字元。一旦您切換標籤頁或儲存，該字元將被轉換為似乎是正常的空間，但不會被剝離出標記。請注意，這可能會影響您的跨度的大小，就像在單元中放置單個字母一樣： 
假設您正在使用 UTF-8 字元集，則可以透過 HTML 實體 使用”soft-hyphen” 字元。與  不同，soft-hypen 字元被渲染為沒有佔用空間，不應影響跨度的大小：

使用替代元素

雖然 WordPress 的 TinyMCE 被配置為刪除空的 元素，但是還有一些預設配置的其他標籤，以允許沒有內容的現有內容。在 ticket #26986 的評論中，TobiasBg 建議使用(， 和 是其他一些可能性) 。有關使用 圖示的更多資訊，請參閱 this Stack Overflow question 。

<i class="icon-shield"></i>

建立您自己的 TinyMCE 例項

這可能是最複雜和普遍荒謬的解決方案，因此我不會提供實施。使用外掛，應該可以載入 TinyMCE 指令碼的單獨例項，但是您需要配置它們 (超出 WordPress 公開的選項)，並替換預設編輯器 (或隱藏它並新增替換的 metabox) 。雖然允許您停用空的跨度，刪除這樣的實施所需的時間可能會大大超過這個好處。

參考文獻

WordPress Visual Editor Stripping HTML Changes

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

WordPress 視覺化編輯器剝離 HTML 更改