Sun Editor字体名称与字号下拉框选中状态不更新问题

我在React应用中集成了Sun Editor，按官方指引完成集成后应用运行正常，但存在一个问题：从下拉框选择字体名称或字号时，编辑器功能正常，但下拉框的默认标签不会更新为选中的字体名称或字号，始终显示“font”。

我的代码： #

import './App.css';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';
import React, { useRef } from 'react';

function App() {
  const editor = useRef();

  const getSunEditorInstance = (sunEditor) => {
      editor.current = sunEditor;
  };

  function handleChange(content){
    //console.log(content.font.targetText);
  } 

  return (
    <div>
      <SunEditor
      ref={editor}
      getSunEditorInstance={getSunEditorInstance}
      autofocus={true}
      placeholder = 'Enter the text'
      width="100%"
      min-height = "40rem"
      onChange = {handleChange}
      setOptions={{
        font: [ 
          "Arial",
          "Comic Sans MS",
          "Courier New",
          "Impact",
          "Georgia",
          "Tahoma",
          "Trebuchet MS",
          "Verdana",
          "Logical",
          "Salesforce Sans",
          "Garamond",
          "Sans-Serif",
          "Serif",
          "Times New Roman",
          "Helvetica"
        ],
        fontSize: [8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 36, 42, 55, 60],
        popupDisplay: 'local',
        buttonList:[
            ["undo", "redo"],            
            ["font", "fontSize", "formatBlock"],
            ["textStyle", "fontColor", "hiliteColor", "horizontalRule"],
            ["bold", "underline", "italic", "strike"],
            ["subscript", "superscript", "removeFormat", "blockquote"],
            ["list", "align", "table", "image", "preview"]
        ],
      }}
      />
    </div>
  );
}

export default App;

问题截图： #

解决方案 #

这个问题的核心是自定义字体/字号列表时，必须使用键值对格式（{text: 显示文本, value: 实际值}），而非纯字符串或数字数组。Sun Editor需要明确的文本标签与实际值的对应关系，才能正确识别当前选区的字体/字号并更新下拉框显示。

修改setOptions中的font和fontSize配置为以下格式：

setOptions={{
  // 字体配置改为键值对格式
  font: [
    {text: "Arial", value: "Arial"},
    {text: "Comic Sans MS", value: "Comic Sans MS"},
    {text: "Courier New", value: "Courier New"},
    {text: "Impact", value: "Impact"},
    {text: "Georgia", value: "Georgia"},
    {text: "Tahoma", value: "Tahoma"},
    {text: "Trebuchet MS", value: "Trebuchet MS"},
    {text: "Verdana", value: "Verdana"},
    {text: "Logical", value: "Logical"},
    {text: "Salesforce Sans", value: "Salesforce Sans"},
    {text: "Garamond", value: "Garamond"},
    {text: "Sans-Serif", value: "Sans-Serif"},
    {text: "Serif", value: "Serif"},
    {text: "Times New Roman", value: "Times New Roman"},
    {text: "Helvetica", value: "Helvetica"}
  ],
  // 字号配置改为键值对格式
  fontSize: [
    {text: "8", value: "8"},
    {text: "10", value: "10"},
    {text: "12", value: "12"},
    {text: "14", value: "14"},
    {text: "16", value: "16"},
    {text: "18", value: "18"},
    {text: "20", value: "20"},
    {text: "22", value: "22"},
    {text: "24", value: "24"},
    {text: "26", value: "26"},
    {text: "28", value: "28"},
    {text: "30", value: "30"},
    {text: "32", value: "32"},
    {text: "36", value: "36"},
    {text: "42", value: "42"},
    {text: "55", value: "55"},
    {text: "60", value: "60"}
  ],
  // 其余配置保持不变
  popupDisplay: 'local',
  buttonList:[
      ["undo", "redo"],            
      ["font", "fontSize", "formatBlock"],
      ["textStyle", "fontColor", "hiliteColor", "horizontalRule"],
      ["bold", "underline", "italic", "strike"],
      ["subscript", "superscript", "removeFormat", "blockquote"],
      ["list", "align", "table", "image", "preview"]
  ],
}}

额外排查点 #

如果修改后问题仍存在，可以检查：

• 确保suneditor-react与suneditor版本兼容，建议升级到最新稳定版
• 确认编辑器选区的字体/字号值与配置中的value完全一致（比如字体名称的大小写、空格是否匹配）

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