Menu
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.
Projectstructor
root
|-public
|-skins
|-src
|-App.js
|-TinyEditorComponent.js
|-webpack.config.js
What I have done step by step:
npx create-react-app my-app
$ npm install --save @tinymce/tinymce-react
cp -r node_modules/tinymce/skins skins
create file webpack.config.js
const config = { module: { loaders: [ { test: require.resolve("tinymce/tinymce"), loaders: ["imports?this=>window", "exports?window.tinymce"], }, { test: /tinymce\/(themes|plugins)\//, loaders: ["imports?this=>window"], }, ], }, };
TextEditor Component:
import React, { Component } from "react";
// Import TinyMCE
import tinymce from "tinymce/tinymce";
// Default icons are required for TinyMCE 5.3 or above
import "tinymce/icons/default";
// A theme is also required
import "tinymce/themes/silver";
// Any plugins you want to use has to be imported
import "tinymce/plugins/paste";
import "tinymce/plugins/link";
class TinyEditorComponent extends Component {
constructor() {
super();
this.state = { editor: null };
}
componentDidMount() {
tinymce.init({
selector: `#${this.props.id}`,
skin_url: `./skins/content/dark`,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste code help wordcount",
],
toolbar: "undo redo | formatselect | bold italic backcolor |",
setup: editor => {
this.setState({ editor });
editor.on("keyup change", () => {
const content = editor.getContent();
this.props.onEditorChange(content);
});
},
});
}
componentWillUnmount() {
tinymce.remove(this.state.editor);
}
render() {
return (
<textarea
id={this.props.id}
value={this.props.content}
onChange={e => console.log(e)}
/>
);
}
}
export default TinyEditorComponent;
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?
461
Running TinyMCE from the cloud Get started with a free API key (with a 14-day trial of our premium plugins) and load the TinyMCE package as follows, replacing no-api-key with your own.
Is TinyMCE free? Yes. The TinyMCE core editor is free to use for commercial and noncommercial purposes.
Ideally, you should be using their own ReactComponent. this answer takes knowledge from https://www.tiny.cloud/docs/integrations/react/
You should install the component @tinymce/tinymce-react via npm or yarn whichever is your preference. once you have installed that you import the editor
import { Editor } from '@tinymce/tinymce-react';
You can then use it like so
<Editor
initialValue="<p>This is the initial content of the editor</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}}
/>
then add your self-hosted copy of TinyMCE to your public folder.
edit index.html inside the public folder and add the following inside your <head> tag
<script src="tinymce.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
