React-Summernote显示视图异常求助：附代码及CodeSandbox链接

Hey there, let's break down why your React-Summernote component is acting up and how to fix it. Based on your code and common pitfalls with this library, here are the key adjustments you need to make:

1. Add the Missing jQuery Dependency #

React-Summernote is built on top of the original Summernote library, which requires jQuery to work. Your current code doesn't include jQuery, which is almost certainly causing the view/layout anomalies. Here's how to fix this:

• First, install jQuery via npm/yarn: npm install jquery or yarn add jquery
• Then import and expose it globally before importing ReactSummernote:

  import $ from 'jquery';
  window.jQuery = $;
  window.$ = $;
  

2. Fix Bootstrap Dependency Loading #

Your modular Bootstrap JS imports might be missing critical components needed for Summernote's UI (like dropdowns or modals). Switch to importing the full Bootstrap bundle to ensure all required parts are available:

// Replace your individual Bootstrap JS imports with this:
import "bootstrap/dist/js/bootstrap.bundle.min";

3. Adjust Style Import Order #

Style loading order can cause layout conflicts. Make sure you load Bootstrap's CSS first, then React-Summernote's CSS:

// Correct order: Bootstrap CSS → React-Summernote CSS
import "bootstrap/dist/css/bootstrap.css";
import "react-summernote/dist/react-summernote.css";

Full Modified Code #

Here's the updated version of your component with all fixes applied:

import React, { Component } from "react";
// Add jQuery first and expose it globally
import $ from 'jquery';
window.jQuery = $;
window.$ = $;

// Load Bootstrap dependencies in the right order
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle.min";

// Finally import ReactSummernote and its styles
import ReactSummernote from "react-summernote";
import "react-summernote/dist/react-summernote.css";

class RichTextEditor extends Component {
  onChange(content) {
    console.log("onChange", content);
  }

  render() {
    return (
      <ReactSummernote
        value="Default value"
        options={{
          height: 350,
          dialogsInBody: true,
          toolbar: [
            ["style", ["style"]],
            ["font", ["bold", "underline", "clear"]],
            ["fontname", ["fontname"]],
            ["para", ["ul", "ol", "paragraph"]],
            ["table", ["table"]],
            ["insert", ["link", "picture", "video"]],
            ["view", ["fullscreen", "codeview"]]
          ]
        }}
        onChange={this.onChange}
      />
    );
  }
}

export default RichTextEditor;

Why This Works #

• jQuery is a non-negotiable dependency for Summernote's core functionality (like toolbar interactions, dialog modals, and content editing). Without it, the library can't initialize properly, leading to broken views.
• Using the full Bootstrap bundle ensures all UI components (dropdowns, tooltips, modals) that Summernote relies on are loaded correctly.
• Proper style ordering prevents Bootstrap styles from overriding or conflicting with React-Summernote's custom styles.

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