Chrome中双击WordPress TinyMCE的<meter>元素致页面崩溃

我之前也碰到过类似HTML5元素和TinyMCE编辑器的兼容性坑，你这个情况百分百是Chrome浏览器和WordPress自带的可视化编辑器（基于TinyMCE）之间的原生bug，和你的插件、手动添加元素的操作完全没关系。

问题原因分析 #

TinyMCE在处理<meter>这类相对小众的HTML5元素时，双击触发的编辑器初始化逻辑和Chrome的渲染引擎产生了冲突——编辑器试图给<meter>挂载编辑控件时，Chrome的DOM解析或渲染环节出现了未处理的异常，甚至触发了浏览器的崩溃保护机制，才会弹出"Aw Snap!"的提示。

可行的解决方案 #

1. 临时应急方法

• 直接避开在可视化编辑器中双击<meter>元素，需要编辑时切换到文本编辑器模式，直接修改<meter>的HTML代码，完成后再切回可视化模式预览效果。
• 给<meter>套一层普通的<div>容器，这样双击时只会选中外层的div，不会触发<meter>本身的编辑器交互：

  <div class="meter-wrapper">
    <meter value="60" min="0" max="100"></meter>
  </div>
  

2. 插件层面的针对性修复（适配你的开发场景）

可以在你的WordPress编辑器插件中添加一段JS代码，拦截<meter>元素的双击事件，阻止TinyMCE的默认处理逻辑，从根源避免崩溃：

jQuery(document).ready(function($) {
  // 确保TinyMCE已加载完成
  if (typeof tinymce !== 'undefined') {
    tinymce.init({
      setup: function(editor) {
        editor.on('dblclick', function(event) {
          // 判断双击目标是否为meter元素
          if (event.target.nodeName === 'METER') {
            event.preventDefault();
            // 用编辑器自带的通知提示用户切换编辑模式
            editor.notificationManager.open({
              text: '请切换到文本编辑器模式编辑进度条元素',
              type: 'info'
            });
          }
        });
      }
    });
  }
});

3. 长期根治方案

你可以向WordPress官方的Trac系统提交这个bug，详细描述问题场景（Chrome浏览器下、可视化编辑器双击<meter>崩溃），官方会在后续的TinyMCE版本更新中修复这类兼容性问题。

内容的提问来源于stack exchange，提问作者Cuterus