title: TinyMCE Self-hosted with React
body: <p>i am trying to create a simple self-hosted TinyMCE with react. Currently my project is just show a simple textarea there is no toolbar or any style. I think a good way to integrate tinymce is by using a module loader. I read that react already includes webpack by using npx create-react-app.</p>
  <pre><code>Projectstructor
      root
      |-public
      |-skins
      |-src 
         |-App.js
         |-TinyEditorComponent.js
      |-webpack.config.js
  </code></pre>
  <p>What I have done step by step:</p>
  <ol>
  <li><p>npx create-react-app my-app</p>
  </li>
  <li><p>$ npm install --save @tinymce/tinymce-react</p>
  </li>
  <li><p>cp -r node_modules/tinymce/skins skins</p>
  </li>
  <li><p>create file webpack.config.js</p>
  </li>
  </ol>
  <blockquote>
  <pre><code>const config = {
    module: {
      loaders: [
        {
          test: require.resolve(&quot;tinymce/tinymce&quot;),
          loaders: [&quot;imports?this=&gt;window&quot;, &quot;exports?window.tinymce&quot;],
        },
        {
          test: /tinymce\/(themes|plugins)\//,
          loaders: [&quot;imports?this=&gt;window&quot;],
        },
      ],
    },
  };
  </code></pre>
  </blockquote>
  <p>TextEditor Component:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  // Import TinyMCE
  import tinymce from &quot;tinymce/tinymce&quot;;
  
  // Default icons are required for TinyMCE 5.3 or above
  import &quot;tinymce/icons/default&quot;;
  
  // A theme is also required
  import &quot;tinymce/themes/silver&quot;;
  
  // Any plugins you want to use has to be imported
  import &quot;tinymce/plugins/paste&quot;;
  import &quot;tinymce/plugins/link&quot;;
  
  class TinyEditorComponent extends Component {
    constructor() {
      super();
      this.state = { editor: null };
    }
  
    componentDidMount() {
      tinymce.init({
        selector: `#${this.props.id}`,
        skin_url: `./skins/content/dark`,
        plugins: [
          &quot;advlist autolink lists link image charmap print preview anchor&quot;,
          &quot;searchreplace visualblocks code fullscreen&quot;,
          &quot;insertdatetime media table paste code help wordcount&quot;,
        ],
        toolbar: &quot;undo redo | formatselect | bold italic backcolor |&quot;,
        setup: editor =&gt; {
          this.setState({ editor });
          editor.on(&quot;keyup change&quot;, () =&gt; {
            const content = editor.getContent();
            this.props.onEditorChange(content);
          });
        },
      });
    }
  
    componentWillUnmount() {
      tinymce.remove(this.state.editor);
    }
  
    render() {
      return (
        &lt;textarea
          id={this.props.id}
          value={this.props.content}
          onChange={e =&gt; console.log(e)}
        /&gt;
      );
    }
  }
  
  export default TinyEditorComponent;
  </code></pre>
  <p>I am not sure how to override and configure webpack for tinymce, there are alot of old ways but what is the right one. By injecting webconfig?</p>