自定义构建CKEditor5（BalloonBlockEditor）placeholder配置失效求助

问题原因 #

你的代码存在两个关键问题导致占位符无法显示：

1. 配置项拼写错误：React组件中配置的placeHolder（大写H）不符合CKEditor5的规范，正确的配置项是placeholder（全小写h）。
2. 无效配置项：title.placeholder并非BalloonBlockEditor的官方配置项，该配置对编辑器内容占位符无作用。

修复步骤 #

1. 修正配置项拼写，将placeHolder改为placeholder。
2. 移除无效的title配置块（如果不需要额外标题组件的话）。
3. 确保编辑器初始数据为空（你的代码中data={content || ""}已经满足，但需确认传入的content确实为undefined或空字符串）。

修改后的React组件代码 #

import CustomEditorSetup from "ckeditor5-custom-build/build/ckeditor";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import React from "react";

const CustomEditor = ({
  content,
  onChange,
}: {
  content?: string;
  onChange: (data: string) => void;
}) => {
  const config = {
    // 修正拼写为正确的placeholder
    placeholder: "Type the content here!",
  };

  return (
    <CKEditor
      config={config}
      editor={CustomEditorSetup}
      data={content || ""}
      onChange={(event: any, editor: any) => {
        const data = editor.getData();
        onChange(data);
      }}
      onReady={(editor: any) => {
        editor.editing.view.focus();
      }}
    />
  );
};

export default CustomEditor;

额外检查点 #

• 确认自定义构建中已包含Essentials插件：你的构建代码中已经引入了该插件，占位符功能依赖此插件，无需额外操作。
• 编辑器焦点影响：如果编辑器自动获取焦点（你的onReady中调用了focus()），占位符会在焦点获取后隐藏，这是正常行为。若希望始终显示占位符直到用户输入，可移除editor.editing.view.focus()这行代码。

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