Wordpress Visual Editor剥离HTML更改

当我使用WordPress HTML编辑器添加icomoon图标时，如下所示：

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

然后切换到视觉编辑器，然后再回到HTML编辑器，图标消失。我正在尝试包含此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' );

我怎样才能解决这个问题？

背景

此问题主要与<span></span>保存帖子或在Visual和Text编辑器选项卡之间切换时在TinyMCE中删除空白元素有关。该问题是核心功能所固有的（从主干​​版本开始4.0-alpha-20140602），并且无法通过标准WordPress API进行更改，如票证＃26986中所述。该票证详细说明了设置背后的原因，并标记为wont-fix，表示您最好的选择是以下列出的“变通办法”之一。

默认WordPress / TinyMCE行为

默认情况下，WordPress的TinyMCE实例配置为删除一些空标签或缺少某些属性的标签，以消除不做任何事情的标记。

从MDN的<span>文档中：

HTML元素是用于表达内容的通用内联容器，它本质上不代表任何内容。它可以用于对元素进行分组以进行样式设置（使用class或id属性），或者因为它们共享属性值（例如lang）。仅当没有其他语义元素合适时才应使用它。

至于<span>旨在组内嵌元素/内容，WordPress的核心贡献者已经决定，当标签是空的元素必须是不相关的，从而从所述内容剥离它。

全面工作

在大多数情况下，要修改TinyMCE的配置中的适当的方法是将钩成tiny_mce_before_init与过滤器然而span的空去除行为不能以这种方式被修改。为此，可能需要破解核心文件，因此，我没有提供任何此类解决方案供考虑。

理想：给<span>屏幕阅读器文本

屏幕阅读器是试图解释屏幕上的内容以帮助视障人士的软件。在处理网页时，大多数屏幕阅读器要么完全禁用CSS（和Javascript），要么仅处理子集，这样，通常由CSS隐藏的内容将最终得到处理，就好像它是可见的一样。传统上，Web开发人员通过创建CSS类来利用可访问性来利用此行为，该CSS类可应用于将元素隐藏在启用CSS的每个人中的元素，大致类似于：

.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);
}

有了此类（您的主题的样式表可能具有类似的类别），您可以在图标范围内添加第二个“屏幕阅读器”范围，该范围不会（或至少看上去）在屏幕上呈现，但将为屏幕阅读器提供图标的可访问替代方法，类似于alt属性在上的工作方式<img>：

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

启用CSS时，以上将显示您的图标，并且屏幕阅读器将在其位置解释“安全性”。

提供<span>不可见的内容

为了防止<span>剥夺s，您可以添加未明确显示的内容：

• 在开始和结束标记之间添加一个空格字符就足够了。但是，由于去除了空白，您需要通过 HTML实体添加字符。切换标签或保存后，此字符将被转换为显示为普通空格，但是不会从标记中剥离出来。请注意，这可能会影响跨度的大小，就像在元素中放置单个字母一样：

  <span class="icon-shield">&nbsp;</span>

• 假设您使用的是UTF-8字符集，则可以通过HTML实体使用“软连字符”字符­。不同于 ，软连字符会呈现为不占用任何空间，并且不会影响跨度的大小：

  <span class="icon-shield">&shy;</span>

使用替代元素

虽然WordPress的TinyMCE配置为去除空<span>元素，但默认情况下，还有许多其他标记配置为允许不包含内容的现有标记。在评论票＃26986，TobiasBg建议使用<i>（<em>，<b>，和<strong>一些其他的可能性）。有关使用图标的实践的更多信息，请参见此堆栈溢出问题<i>。

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

创建您自己的TinyMCE实例

这可能是最复杂，通常最荒谬的解决方案，因此，我将不提供实现。使用插件，应该可以加载TinyMCE脚本的单独实例，根据需要进行配置（超出WordPress公开的选项），并替换默认编辑器（或隐藏默认编辑器并添加替换元框）。在允许您禁用删除空跨度的同时，充实此类实现所需的时间可能会大大超过其好处。