TinyMCE is super flexible. At the core of its flexibility is the extensive plugin system. As powerful as it is, it's really a breeze to get started. So let's provide the init prop to the editor component, which passes on an init option from the wrapper editor component to the actual core TinyMCE library.
Now we want to target the plugins option. Here, we can define any number of free and open source or premium plugins. Let's start out by adding support for images. Over in the browser, under the Insert menu, we now have a new item that wasn't there before.
When I click on it, we've got a dialog for adding a new image. At its simplest, you can provide an image via a URL, but TinyMCE also provides a file underscore picker underscore. callback option that makes it easy to upload images to your bespoke backends. This supplementation completely depends on what your backend looks like, and we don't have a backend, so we're going to skip doing this in this course.
Another way we can customize the editor is by configuring what shows up in the toolbar. That is this bar here just above the actual editing area. Right now, we have the default toolbar with some various formatting options, things like bold, italic, the positioning of the text, and so on. What if, though, I wanted to show a control for uploading images?
Well, we can totally do that with the toolbar option. Now, all the displays in the toolbar is our single image tool. So, the toolbar option overrules the default toolbar. Okay, let's add a few of the default tools back in.
I'll copy and paste in the italic, bold, underline, and strikethrough tools. Back in the browser, these tools have returned. Notice that they are in the same order as we defined them in the code. We have image first, followed by italic, and on down the line.
That's exactly what it looks like over in the code. Image, italic, and then the rest in the same order. So we have complete control over the order of the tools simply based on the order we add them in the toolbar option. We also have the ability to break the toolbar into different sections just by adding a pipe between the different tools.
Notice now in the browser that there is a gap between the image and the rest of the toolbar items where I put the pipe inside of the code. Besides the pretty standard plugins, There are also some other unique and helpful plugins such as the case change plugin. Back in the browser though, it doesn't look like anything has actually changed. Well, some plugins don't add any commands to the top toolbar.
Instead, we'll need to add the case change tool to the toolbar ourselves. Perfect. Now we can change the case of any selected text to lowercase, uppercase, or title case in a single click. These couple plugins are of course only a small sampling of everything that's available.
In the TinyMCE docs, you can see a full listing of all the plugins on this page here at slash docs slash TinyMCE slash latest slash plugins. I've left a link to this page in the description below, but let's just scroll through and point out a few interesting ones. This one really catches my eye. There is an AI assistant, a way to inline CSS, even an image editing plugin that looks pretty cool.
There's also the ability to add enhanced media, comments, case change, which we just saw, add a checklist, enhanced code editor, and many, many more here. Also, if you'd like more information on the tools that are available, to put in the toolbar, take a look at this page that I've also linked to in the description below. First, we have a list of all the toolbar items that you can add and order to your liking that come out of the box with the editor. For instance, if we wanted to get the alignment options back, we could add these three toolbar items to the toolbar option.
Scrolling down just a little bit more, there is also a listing of all the toolbars available via different plugins. So in order for these toolbar items to work, the associated plugin must be installed. Many plugins have a single toolbar item that's named the same thing as the plugin. But other plugins expose more than one tool.
The basics of customizing TinyMCE consist of using plugins and then customizing the toolbar. The process truly couldn't be easier. We've only scratched the surface though. In the following chapters, let's take a look at some real world use cases as a context for exploring some more advanced concepts.
TinyMCE is super flexible. At the core of its flexibility is the extensive plugin system. As powerful as it is, it's really a breeze to get started. So let's provide the init prop to the editor component, which passes on an init option from the wrapper editor component to the actual core TinyMCE library.
Now we want to target the plugins option. Here, we can define any number of free and open source or premium plugins. Let's start out by adding support for images. Over in the browser, under the Insert menu, we now have a new item that wasn't there before.
When I click on it, we've got a dialog for adding a new image. At its simplest, you can provide an image via a URL, but TinyMCE also provides a file underscore picker underscore. callback option that makes it easy to upload images to your bespoke backends. This supplementation completely depends on what your backend looks like, and we don't have a backend, so we're going to skip doing this in this course.
Another way we can customize the editor is by configuring what shows up in the toolbar. That is this bar here just above the actual editing area. Right now, we have the default toolbar with some various formatting options, things like bold, italic, the positioning of the text, and so on. What if, though, I wanted to show a control for uploading images?
Well, we can totally do that with the toolbar option. Now, all the displays in the toolbar is our single image tool. So, the toolbar option overrules the default toolbar. Okay, let's add a few of the default tools back in.
I'll copy and paste in the italic, bold, underline, and strikethrough tools. Back in the browser, these tools have returned. Notice that they are in the same order as we defined them in the code. We have image first, followed by italic, and on down the line.
That's exactly what it looks like over in the code. Image, italic, and then the rest in the same order. So we have complete control over the order of the tools simply based on the order we add them in the toolbar option. We also have the ability to break the toolbar into different sections just by adding a pipe between the different tools.
Notice now in the browser that there is a gap between the image and the rest of the toolbar items where I put the pipe inside of the code. Besides the pretty standard plugins, There are also some other unique and helpful plugins such as the case change plugin. Back in the browser though, it doesn't look like anything has actually changed. Well, some plugins don't add any commands to the top toolbar.
Instead, we'll need to add the case change tool to the toolbar ourselves. Perfect. Now we can change the case of any selected text to lowercase, uppercase, or title case in a single click. These couple plugins are of course only a small sampling of everything that's available.
In the TinyMCE docs, you can see a full listing of all the plugins on this page here at slash docs slash TinyMCE slash latest slash plugins. I've left a link to this page in the description below, but let's just scroll through and point out a few interesting ones. This one really catches my eye. There is an AI assistant, a way to inline CSS, even an image editing plugin that looks pretty cool.
There's also the ability to add enhanced media, comments, case change, which we just saw, add a checklist, enhanced code editor, and many, many more here. Also, if you'd like more information on the tools that are available, to put in the toolbar, take a look at this page that I've also linked to in the description below. First, we have a list of all the toolbar items that you can add and order to your liking that come out of the box with the editor. For instance, if we wanted to get the alignment options back, we could add these three toolbar items to the toolbar option.
Scrolling down just a little bit more, there is also a listing of all the toolbars available via different plugins. So in order for these toolbar items to work, the associated plugin must be installed. Many plugins have a single toolbar item that's named the same thing as the plugin. But other plugins expose more than one tool.
The basics of customizing TinyMCE consist of using plugins and then customizing the toolbar. The process truly couldn't be easier. We've only scratched the surface though. In the following chapters, let's take a look at some real world use cases as a context for exploring some more advanced concepts.