TinyMCE is an online rich-text editor for an open-source software under the GNU General Public License version 2 or later. It converts HTML textarea fields, or other designated HTML elements, into editor instances. It can be integrated in any framework such Nextjs , python ,react etc . – Source Wikipedia
How to Integrate TinyMCE Editor in HTML
Step 1: Introduction to TinyMCE
TinyMCE is a very flexible text editor that is easy-to-use . It is like the WYSIWYG HTML editor. It provides a simple and better interface for writing, editing, and formatting text.
Quill editor next js integration process in Nextjs
Step 2: Adding TinyMCE to Your HTML Project
You can easily add or integrate TinyMCE into your HTML project with this easy steps.
Step 2.1: Create a Basic HTML Structure
The first thing you have to do is to set up a basic HTML file where you want to integrate TinyMCE like my own below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrate TinyMCE in HTML</title>
</head>
<body>
<h1>Welcome to TinyMCE Integration Tutorial</h1>
<textarea id="editor"></textarea>
<!-- Include TinyMCE JavaScript library here -->
</body>
</html>Step 2.2: Include the TinyMCE JavaScript Library
For simplicity, let us do it this way . we’ll use the CDN to make us be in the safer side . Place the following <script> tag just before the closing </body> of your tag:
<!-- Include TinyMCE from the official CDN -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>Though in my own ends , I have an API key ,Make sure you replace "no-api-key" with your API key if you have an API key. To signup is free, sign up for a free API key from the TinyMCE official website. One secret is that if you don’t have an API key, the editor will still work for you but it will work with a watermark in your text editor.
Nextjs text editors all in one list
Step 2.3: Initialize TinyMCE on a Textarea
Now that we have successfully added our API key and set up everything. Let us initialize TinyMCE on the textarea where we want to turn into an editor. Add the following JavaScript snippet after the TinyMCE script tag like my own below.
<script>
tinymce.init({
selector: '#editor'
});
</script>Below is the full code of how the HTML file looks with TinyMCE is being integrated in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Integrate TinyMCE in HTML</title>
</head>
<body>
<h1>Welcome to TinyMCE Integration Tutorial</h1>
<textarea id="editor"></textarea>
<!-- Include TinyMCE JavaScript library -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#editor'
});
</script>
</body>
</html>Step 3: Customizing TinyMCE
TinyMCE provides developers with wide range of customization options,. This options includes toolbar configuration, plugins, themes, and more.
Step 3.1: Configuring the Toolbar
By default, TinyMCE has a minimal toolbar that it comes with. To add more functionality to the default look, you have to configure the toolbar using the toolbar option:
How to integrate slate text editor in Nextjs
<script>
tinymce.init({
selector: '#editor',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat'
});
</script>This toolbar above we have just added adds a configuration buttons for undo, redo, text formatting, alignment, lists, and many other buttons.
Step 3.2: Adding Plugins
TinyMCE also supports other various plugins that enhance its functionality, such as inserting images, tables, media, and more. To add the extra plugins use the plugins option:
<script>
tinymce.init({
selector: '#editor',
plugins: 'advlist autolink lists link image charmap print preview anchor textcolor',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image'
});
</script>In this example, we added an advance plugins for lists, links, images, and more.
Step 3.3: Setting Up TinyMCE with Custom Themes
In TinyMCE you can also use custom themes. By default, TinyMCE uses the “silver” theme, some people wants something different , you can change it to another theme if you prefer it. For example, to use a custom theme, you would specify it like thus example below.
<script>
tinymce.init({
selector: '#editor',
plugins: 'advlist autolink lists link image charmap print preview anchor textcolor',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image',
skin: 'oxide-dark', // Custom theme (dark mode)
content_css: 'dark' // Custom content CSS for dark mode
});
</script>Step 3.4: Configuring the Editor’s Appearance and Behavior
You can further customize the appearance and behavior of the editor using additional configuration options:
<script>
tinymce.init({
selector: '#editor',
plugins: 'advlist autolink lists link image charmap print preview anchor textcolor',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image',
menubar: false, // Disable the menu bar
height: 500, // Set editor height
branding: false // Remove "Powered by Tiny" branding
});
</script>Step 4: Saving Data from TinyMCE
To save the content you have created with TinyMCE, you need to take care of the form submission in your backend script. TinyMCE automatically updates the textarea content whenever you submit a form. Here’s a simple HTML form setup
<form method="post" action="save_content.php">
<textarea id="editor" name="content"></textarea>
<button type="submit">Save Content</button>
</form>In your backend script (e.g., save_content.php), you can then access the content field to save it to your database or file system.
Step 5: Additional Customization Options
TinyMCE offers numerous other configuration options, such as setting the default font size, enabling custom styles, configuring file upload paths, and more. For a full list of options and plugins, refer to the TinyMCE documentation.
Conclusion of how to install TinyMCE editor in html
To integrate TinyMCE text editor into an HTML webpage is a straightforward process. It can significantly enhance text-editing abilities of your application. If you have followed this steps strictly you would be able to integrate TinyMCE editor in your project successfully.
