Sign upSign InSign upSign InMehani KariyawasamFollowLevel Up Coding--ListenShareWelcome to a series of articles all about Tiny Mce, its awesome plugins, and the ins and outs of customizing this Editor to match your needs.Table of ContentsTiny MCE is a versatile WYSIWYG editor known for its lightweight design and loaded feature set. It provides many formatting and UI customization options ensuring a seamless integration into your application’s overall user experience.There are three ways of integrating Tiny MCE into your project.Tiny MCE supports most of the popular frameworks, such as React, Angular, Vue.js, Blazor, etc. This blog will focus on the integration of Tiny MCE with React.The paid version gives you the option to either host or bundle the .zip package. However, Tiny MCE does not recommend bundling the tinymcepackage as it can be complicated and error-prone.Let’s take a look at how we can work with the .zip package by hosting it.Or, if you want to check out the free version, you can follow the approach outlined below!Install the tinymce-react package.You are required to include your Tiny Cloud API Key in the editor properties. (Shown in the example below)For this example, we’ll opt to obtain Tiny MCE from the Tiny Cloud CDN.I have included the code for a basic editor for my App.js.If you go ahead and run the application, you’ll see the editor looking just like this! This is a basic version of the editor which doesn’t require additional configurations for the plugins.You have the freedom to customize the editor to suit your requirements. Here are some options that you can adjust:Skins, icons, themes: Tiny MCE provides multiple options to style the editor’s appearance. In addition to the options provided by them, you can also create your own!You can also personalize the appearance of both the toolbar buttons and the toolbar itself to match your preferences.The toolbar option should be used to add the buttons you wish to display. It should be a list separated with the available toolbar options. You can also create groups within this list. To do so, add the | pipe character between the groups you wish to create.You can add as many toolbars as you wish or disable it completely if you don’t want it!Tiny MCE also provides an option to accommodate the overflowing toolbar buttons. The toolbar_mode handles this functionality.The default value is the floating mode. You can also set it to 'sliding', 'scrolling', or 'wrap'.If you set the toolbar_mode as floating or sliding, the toolbar buttons will be moved based on the width of the editor and the defined toolbar groups.If the toolbar configuration is wider than the editor, the items before the separator will appear in the toolbar with a button with 3 dots. The rest of the options will be moved to the toolbar drawer which can be accessed by clicking on the three-dot menu.In addition to the buttons from the plugins, you can also add your custom buttons! These buttons can be customized to execute your JavaScript code. This gives you complete control of the editor. You can use them to craft a math equation editor, seamlessly insert special characters, add custom code snippets, incorporate predefined templates, and much more.To demo how custom buttons work, I have added a button that enters the pound sign when clicked. I have also added a custom clear button to clear the contents of the editor. If you run the application, this is what it looks like!Solution:Another interesting thing you can do with the editor is insert content from other components. One practical example is selecting and adding pre-made templates into your editor. You can also customize it to enter the content where your cursor is.You can insert content into the editor using the following method, assuming that templateContent holds the selected content in HTML format.This article covers only a fraction of what Tiny MCE offers. Head over to the documentation to learn more.In the upcoming article in this series, we’ll dive into the integration of the ‘Mentions’ Plugin with our React Editor.----Level Up CodingMehani KariyawasaminLevel Up Coding--Arslan AhmadinLevel Up Coding--19Victor TimiinLevel Up Coding--33Mehani Kariyawasam--Toobaamjad--Harshvardhan Chauhan--1Vinod Bhat--1H.K. Chamod--sahil shah--Yassine Gherbi--2HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams