如何在Froala WYSIWYG编辑器中添加自定义字体大小输入选项

核心实现逻辑：利用Froala开放的自定义按钮API，新增支持用户输入的交互控件挂载到工具栏，手动调用编辑器原生的字体大小设置方法处理用户输入值即可。

步骤1：注册自定义字体大小输入按钮 #

// 注册自定义字体大小输入按钮
FroalaEditor.RegisterButton('customFontSizeInput', {
  title: '自定义字体大小',
  icon: 'T', // 可替换为自定义图标
  tag: 'span',
  // 渲染自定义输入控件
  callback: function (editor) {
    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = '字号';
    input.style.width = '50px';
    input.style.textAlign = 'center';
    input.style.border = '1px solid #ddd';
    input.style.borderRadius = '3px';
    input.style.padding = '2px 4px';

    // 回车或失焦时应用字号
    const applyFontSize = () => {
      let value = input.value.trim();
      if (!value) return;
      // 无单位默认补px，符合普通用户使用习惯
      if (!/^\d+(px|pt|em|rem)$/.test(value)) {
        value = `${parseInt(value)}px`;
      }
      // 校验数值范围，避免生成异常样式
      const numVal = parseInt(value);
      if (numVal < 1 || numVal > 200) {
        alert('请输入1-200范围内的字号');
        return;
      }
      // 调用原生方法应用字号到选中内容
      editor.fontSize.apply(value);
      input.value = '';
    };

    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        applyFontSize();
      }
    });
    input.addEventListener('blur', applyFontSize);

    // 监听选区变化，回填当前选中文本的字号
    editor.events.on('selectionChanged', () => {
      const currentSize = editor.fontSize.get();
      input.value = currentSize ? currentSize.replace('px', '') : '';
    });

    return input;
  }
});

步骤2：初始化编辑器时引入自定义按钮 #

// 初始化编辑器时配置自定义按钮
new FroalaEditor('#editor', {
  toolbarButtons: ['undo', 'redo', 'bold', 'italic', 'fontSize', 'customFontSizeInput', /* 其他原有按钮 */],
  // 其他原有配置项
})

注：如果不需要保留官方的字体大小下拉选择，直接从toolbarButtons配置中移除fontSize即可，仅保留自定义输入控件。

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