Summernote在React中初始化后无法输入内容？

UE丶志利提问于 2026-03-26 19:26:20 阅读 30

组件

我在React项目里集成Summernote，用useRef挂载到div上，编辑器能显示出来，但点进去完全没法输入文字，光标都进不去。是不是哪里初始化错了？

试过加contenteditable属性、手动focus都没用，控制台也没报错。

useEffect(() => {
  $('#summernote').summernote({
    height: 200,
    placeholder: '请输入内容...'
  });
}, []);

富文本编辑器

我来解答赞 1 收藏

反馈

1 条解答

长孙芸菡 Lv1

我一般直接检查是不是jQuery和Summernote的版本问题，你试试把Summernote初始化代码放在useEffect里加个空依赖数组，让它只在组件挂载时运行一次。还有记得确保你的div有正确的id并且是在DOM渲染完成后才初始化。

useEffect(() => {

  $('#summernote').summernote({

    height: 200,

    placeholder: '请输入内容...'

  });

}, []); // 确保这里为空数组

如果还不行，看看是不是样式问题遮挡了编辑区域，这种小细节最烦人了。

2026-03-26 20:10