TinyMCE React编辑器Placeholder不生效问题求助

可能的原因及对应解决方法 #

1. 禁用默认样式导致占位符伪元素样式丢失 #

你设置了skin: false和content_css: false，这会移除TinyMCE自带的所有默认样式。而占位文本是通过body:empty::before伪元素实现的，默认样式被禁用后，这个伪元素的样式也随之丢失，导致占位文本无法渲染。

解决方法：在content_style中手动添加占位符的样式：

content_style: `
  body { font-family: -apple-system, BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; font-size:14px }
  /* 手动补全占位符样式 */
  body:empty::before {
    content: attr(placeholder);
    color: #aaa;
    cursor: text;
    font-family: inherit;
    font-size: inherit;
  }
`

2. 编辑器初始化时存在隐藏的空白内容 #

如果编辑器默认包含空格、换行符等空白内容，即使视觉上看不到，也会让body判定为非空状态，占位符因此不会显示。

解决方法：在onInit钩子中检查并清空空白内容：

onInit={(evt, editor) => {
  this.editorRef.current = editor;
  // 清空所有无意义的空白内容
  if (editor.getContent().trim() === '') {
    editor.setContent('');
  }
  this.controller.setReady()
}}

3. setup函数中的自定义逻辑干扰 #

你的initEditor函数可能存在修改编辑器内容、覆盖body样式或改变编辑器状态的代码，间接破坏了占位符的显示条件。

解决方法：检查initEditor函数中的逻辑，比如是否有自动插入内容、修改body CSS的操作，调整这些代码避免影响占位符的正常显示。

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