WordPress可视化编辑器正在剥离HTML更改

时间：2014-06-02 作者：mcography

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

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

然后切换到可视化编辑器，然后返回HTML编辑器，图标消失。我试图包括this bit of Javascript 来解决这个问题。我查看了wp\\u enqueue\\u脚本，并将其放入函数中。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\' );

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

1 个回复

SO网友:bosco

背景此问题围绕清除空`` 保存帖子或在`Visual` 和`Text` 编辑器选项卡。该问题是核心功能固有的（自trunk版本起`4.0-alpha-20140602`) 并且通过标准WordPress API是不可更改的，如中所述ticket #26986. 票据详细说明了设置背后的原因，并标记为`wont-fix`, 这意味着您的最佳选择是下面列出的“解决方案”之一。

默认WordPress/TinyMCE行为默认情况下，WordPress的TinyMCE实例被配置为删除大量空标记或缺少某些属性的标记，以试图消除没有任何作用的标记。
从…起MDN\'s `` docs:
HTML元素是一个通用的内联容器，用于语法内容，它本身并不表示任何内容。它可以用于将元素分组以进行样式设置（使用class或id属性），或者因为它们共享属性值，例如lang。只有在没有其他语义元素合适时才应使用它。
像`` 用于对内联元素/内容进行分组，WordPress核心贡献者决定，当标记为空时，元素必须是无关的，从而将其从内容中删除。
大部分情况下，修改TinyMCE配置的正确方法是hook into `tiny_mce_before_init` with a filter 然而`span`\'不能以这种方式修改的空删除行为。要做到这一点，可能需要对核心文件进行黑客攻击，因此我没有提供任何此类解决方案供考虑。

理想：给予 屏幕阅读器文本屏幕阅读器是一种试图解释屏幕内容以帮助视力受损者的软件。在处理网页时，大多数屏幕阅读器要么完全禁用CSS（和Javascript），要么只处理一个子集，这样通常由CSS隐藏的内容最终会被处理，就像它是可见的一样。传统上，Web开发人员以可访问性的名义利用这种行为，创建一个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);
}

有了这个类（你的主题样式表可能有一个类似的类），你可以在你的图标范围内添加第二个“屏幕阅读器”范围，它不会（或至少看起来是）在屏幕上呈现，但会为屏幕阅读器提供一个可访问的图标替代品，类似于alt 属性适用于<img>:

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

当启用CSS时，上面的图标将显示您的图标，屏幕阅读器将在此处解释“安全性”。

给予 不可见内容，以防止从剥离中，您可以添加未显式显示的内容：

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

 

. 不像 , “软催眠”角色的渲染似乎不占用任何空间，并且不应影响跨度的大小：

元素中，有许多其他标记默认配置为允许存在而不包含内容。在的评论中ticket #26986, TobiasBg recommends using  (, , 和 还有其他一些可能性）。看见this Stack Overflow question 有关使用 用于图标。

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

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

结束

小码农CODE

WordPress可视化编辑器正在剥离HTML更改

相关推荐

正在注销自定义Tinymce插件？