如何自定义jodit-react-pro的Iframe Properties标题并移除指定输入框

问题背景 #

需要修改Jodit React Pro中Iframe插件的弹窗标题（将默认的"Iframe Properties"替换为自定义内容），同时移除弹窗里的"Name"和"Title"输入框，但尝试的本地化配置未生效。

解决方案 #

1. 正确配置本地化，修改弹窗标题

之前的本地化配置未生效，核心原因是键名不匹配。Jodit的i18n键采用小写横线分隔格式，而非空格分隔，调整后即可生效：

const customLocalization = {
  en: {
    'iframe-properties': 'Iframe エディタ', // 使用正确的i18n键
    'iframe-width': '幅',
    'iframe-height': '高さ',
    'iframe-show-border': '枠線を表示する',
    'image-properties': 'Custom Image Properties',
  },
};

const defaultConfig = useMemo(() => ({
  license: process.env.REACT_APP_JODIT_EDITOR_KEY ?? '',
  language: 'en',
  i18n: customLocalization,
  // 其他原有配置...
}), []);

如果上述方式仍不生效，可直接通过插件配置指定弹窗标题：

const defaultConfig = useMemo(() => ({
  // 其他原有配置...
  iframe: {
    dialogTitle: 'Iframe エディタ', // 直接定义弹窗标题
  },
}), []);

2. 移除"Name"和"Title"输入框

通过iframe.fields配置指定保留的字段，仅保留需要的width、height、border，即可自动移除不需要的输入框：

const defaultConfig = useMemo(() => ({
  // 其他原有配置...
  iframe: {
    fields: ['width', 'height', 'border'], // 仅保留目标字段
  },
}), []);

完整配置示例

将上述配置合并后的完整代码：

const customLocalization = {
  en: {
    'iframe-width': '幅',
    'iframe-height': '高さ',
    'iframe-show-border': '枠線を表示する',
  },
};

const defaultConfig = useMemo(() => ({
  license: process.env.REACT_APP_JODIT_EDITOR_KEY ?? '',
  language: 'en',
  i18n: customLocalization,
  placeholder: '全角：最大1500文字',
  statusbar: false,
  allowResizeX: false,
  allowResizeY: false,
  defaultLineHeight: 1,
  disablePlugins: ['tune-block', 'add-new-line'],
  buttons,
  buttonsMD: buttons,
  buttonsSM: buttons,
  buttonsXS: buttons,
  uploader: {
    insertImageAsBase64URI: true,
    insertVideoAsBase64URI: true,
  },
  preview: true,
  extraButtons: {
    name: 'insertVideo',
    icon: 'video',
    tooltip: '動画挿入',
    exec: handleExtraButtonClick,
  },
  // Iframe插件自定义配置
  iframe: {
    dialogTitle: 'Iframe エディタ',
    fields: ['width', 'height', 'border'],
  },
}), []);

内容的提问来源于stack exchange，提问作者Linh Nguyễn