I don't know about you, but I quite enjoyed how simple it was to put together such a robust newsletter editor in the last chapter. TinyMCE certainly saved me a lot of time and effort had I attempted the same features from scratch. We can do a lot more with TinyMCE though. In this chapter, let's take a look at using TinyMCE to power the customer messaging system within a customer relationship management app.
or a CRM for short. Let's get started by opening up the Chapter 3 end page. This is what we'd like to get to, a messaging interface whose UI is optimized for the task at hand. Plus, we'll see how you might could integrate some useful features like AI to help Word messages and the ability to copy and paste from Word docs.
So now let's start from the starting point together. We'll start by hiding this menu bar at the top of the editor. It's just too much for our simple messaging interface. We can remove it by setting menu bar faults on the editor's init prop.
view. So down inside of the init prop, we'll set menu bar to faults. Great! That cleans things up a bit.
Let's also remove this bar at the bottom of the editor. It's called the status bar, and therefore it can be removed by setting status bar to false, looking even cleaner. Finally, we can also remove the toolbar to complete a minimalistic UI, meaning we would need to remove this toolbar option right down here. This preserves the user's ability to do formatting with the keyboard shortcuts, but I think this is a little too far.
Instead of disabling the toolbar altogether, let's put that toolbar configuration back, then let's just move the position of the toolbar with the toolbar location option. This could be top or bottom, top of course being the default. Let's move our toolbar to the bottom. Awesome.
Finally, let's clean up the items within the toolbar. We can do that by grouping them into logical groupings. You can see that in the code, we're already using the pipes in order to do a form of grouping. This provides a little separation between those groups of tools in the visual output.
But we can refine this further by grouping entire selections of tools into a submenu of tools with the toolbar groups option. Here we can define as many groups as we'd like. as properties on the object. Let's stick with one for grouping all the formatting tools together.
Here we'll say that the items in this group should be everything starting with font family and then ending in block quote. I'll cut those from the original toolbar and add them as an items property to the format group. Next, let's add an icon and a tooltip to display for this toolbar. By the way, it's also possible to rescan the editor completely with different styles and different icon sets.
We won't do that in this course, but you can check out the TinyMCE docs for more info. I've left a link to this page in the description below. Finally, we need to add the format group to the toolbar by placing it in the position that we desire inside of the toolbar option. How about we place it at the very start?
Perfect, that looks really nice and has made our main toolbar a lot simpler while still preserving all the formatting options for those who need them. In conclusion, it only takes a few simple settings to streamline the TinyMCE Editor interface to make it a better fit for a CRM. I don't know about you, but I quite enjoyed how simple it was to put together such a robust newsletter editor in the last chapter. TinyMCE certainly saved me a lot of time and effort had I attempted the same features from scratch.
We can do a lot more with TinyMCE though. In this chapter, let's take a look at using TinyMCE to power the customer messaging system within a customer relationship management app. or a CRM for short. Let's get started by opening up the Chapter 3 end page.
This is what we'd like to get to, a messaging interface whose UI is optimized for the task at hand. Plus, we'll see how you might could integrate some useful features like AI to help Word messages and the ability to copy and paste from Word docs. So now let's start from the starting point together. We'll start by hiding this menu bar at the top of the editor.
It's just too much for our simple messaging interface. We can remove it by setting menu bar faults on the editor's init prop. view. So down inside of the init prop, we'll set menu bar to faults.
Great! That cleans things up a bit. Let's also remove this bar at the bottom of the editor. It's called the status bar, and therefore it can be removed by setting status bar to false, looking even cleaner.
Finally, we can also remove the toolbar to complete a minimalistic UI, meaning we would need to remove this toolbar option right down here. This preserves the user's ability to do formatting with the keyboard shortcuts, but I think this is a little too far. Instead of disabling the toolbar altogether, let's put that toolbar configuration back, then let's just move the position of the toolbar with the toolbar location option. This could be top or bottom, top of course being the default.
Let's move our toolbar to the bottom. Awesome. Finally, let's clean up the items within the toolbar. We can do that by grouping them into logical groupings.
You can see that in the code, we're already using the pipes in order to do a form of grouping. This provides a little separation between those groups of tools in the visual output. But we can refine this further by grouping entire selections of tools into a submenu of tools with the toolbar groups option. Here we can define as many groups as we'd like.
as properties on the object. Let's stick with one for grouping all the formatting tools together. Here we'll say that the items in this group should be everything starting with font family and then ending in block quote. I'll cut those from the original toolbar and add them as an items property to the format group.
Next, let's add an icon and a tooltip to display for this toolbar. By the way, it's also possible to rescan the editor completely with different styles and different icon sets. We won't do that in this course, but you can check out the TinyMCE docs for more info. I've left a link to this page in the description below.
Finally, we need to add the format group to the toolbar by placing it in the position that we desire inside of the toolbar option. How about we place it at the very start? Perfect, that looks really nice and has made our main toolbar a lot simpler while still preserving all the formatting options for those who need them. In conclusion, it only takes a few simple settings to streamline the TinyMCE Editor interface to make it a better fit for a CRM.