React TinyMCE Quickbar如何将font-size选项改为可输入字段

该功能可以实现，核心思路是替换原生quickbar的fontsize下拉控件，自定义带输入框的工具栏按钮，具体实现步骤如下：

• 第一步：移除原有fontsize控件，注册自定义按钮
  首先修改quickbars_selection_toolbar配置，删掉原来的fontsize相关配置项，新增自定义按钮标识，比如custom_fontsize_input。
• 第二步：在setup钩子中实现自定义按钮逻辑
  在init的setup函数内注册该自定义按钮，渲染输入框并绑定字号修改、状态同步逻辑。

修改后的代码示例如下：

<Editor
  key={id}
  initialValue={value}
  inline={true}
  init={{
    plugins: [ 'quickbars', 'autoresize', 'code', 'paste', 'link' ],
    menubar: false,
    toolbar: false,
    quickbars_insert_toolbar: false,
    // 这里把原来selection_toolbar里的fontsize配置替换为自定义按钮名
    quickbars_selection_toolbar: selection_toolbar.replace('fontsize', 'custom_fontsize_input'),
    browser_spellcheck : true,
    autoresize_bottom_margin: 50,
    autoresize_overflow_padding: 50,
    min_height: 100,
    valid_elements: "*[*]",
    paste_as_text: true,
    font_formats: fonts(),
    content_css: [
      customfontStyle
    ],
    setup: (editor) => {
      editorRef.current = editor;

      // 注册自定义字号输入按钮
      editor.ui.registry.addButton('custom_fontsize_input', {
        tooltip: '字号',
        onAction: () => {},
        // 自定义渲染输入框
        render: () => {
          const input = document.createElement('input');
          input.type = 'number';
          input.placeholder = '字号';
          input.style.width = '50px';
          input.style.padding = '2px 4px';
          input.style.border = '1px solid #ddd';
          input.style.borderRadius = '3px';
          
          // 选中文本变化时同步回填当前选中内容的字号
          editor.on('NodeChange', () => {
            const currentSize = editor.formatter.get('fontsize')[0]?.styles?.['font-size'];
            if (currentSize) {
              input.value = currentSize.replace(/px|pt/g, '');
            }
          });

          // 回车或失焦时设置字号
          const setFontSize = () => {
            const size = input.value.trim();
            if (size && !isNaN(Number(size))) {
              // 可根据需求修改单位，比如改成pt
              editor.execCommand('FontSize', false, `${size}px`);
            }
          };
          input.addEventListener('change', setFontSize);
          input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
              e.preventDefault();
              setFontSize();
            }
          });

          return input;
        }
      });

      editor.on('drop', e => {
        console.log(e);
        e.preventDefault();
      });
    }
  }}
  onEditorChange={onChange}
/>

注意事项 #

• 可根据需求调整输入框的样式、单位（支持px/pt/em等）、输入校验规则
• 如果需要保留原有下拉的同时支持输入，也可以直接修改原生fontsize控件的DOM，监听下拉打开事件往里面插入输入框，不过自定义按钮的方案兼容性更高，不会受TinyMCE版本更新影响

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