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 更改