如何拦截TinyMCE修改字号的事件并自定义处理逻辑？

核心思路 #

拦截TinyMCE内置的字号修改命令，阻止其默认添加span标签的行为，同时提取用户选择的字号值，同步到页面外部的可视化组件。

具体实现步骤 #

• 禁用默认行为：通过TinyMCE的setup配置项，监听编辑器的ExecCommand事件，精准匹配字号修改的命令（FontSize）。
• 提取字号值：从事件参数中获取用户选择的字号参数。
• 阻止默认插入：调用事件的preventDefault()方法，阻止编辑器自动插入带style属性的span标签。
• 同步外部组件：将获取到的字号值传递给页面上的其他可视化组件，比如更新显示文本或调整组件样式。

代码示例 #

tinymce.init({
  selector: '#your-editor-container',
  toolbar: 'fontsize',
  setup: function(editor) {
    // 拦截字号修改命令
    editor.on('ExecCommand', function(e) {
      // 匹配字号修改的命令
      if (e.command === 'FontSize') {
        // 获取用户选择的字号值
        const selectedFontSize = e.value;
        // 阻止编辑器插入带style的span标签
        e.preventDefault();
        // 同步到外部可视化组件，示例：更新页面上的字号显示元素
        const sizeDisplay = document.getElementById('font-size-display');
        if (sizeDisplay) {
          sizeDisplay.textContent = `当前选中字号：${selectedFontSize}`;
          // 若需要同步组件样式，可直接修改其style
          sizeDisplay.style.fontSize = selectedFontSize;
        }
      }
    });
  }
});

额外说明 #

• 如果使用自定义的字号选择弹窗而非编辑器默认的下拉菜单，可通过editor.ui.registry.addMenuItem重新定义字号按钮的点击逻辑，完全接管选择流程。
• 需注意确保拦截逻辑不会影响编辑器的其他正常功能，测试时覆盖不同的字号选择场景。

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