Thus far, we've seen a couple of very powerful and practical applications where the tiny MC editor can speed up development and provide top-notch results. In this chapter, let's experiment with one more practical use case. That is building a content management system or CMS. CMSs are important in most any organization.
They're useful for managing blog content or internal documentation. And really, that's just the beginning. In the browser, we've got a nice page layout that's already available with some regions that are editable. This is made possible by the multi-root editing feature that we used in an earlier chapter to build the newsletter template.
This is great, but we can tailor things further to better fit the needs of a CMS use case. Let's start with the configuration of the toolbar. by adding some more styling options. vue file, I'll scroll down, find the toolbar, and let's add in the styles tool.
By default, this gives us a tool that looks like this. It's a dropdown, and it includes styles for various headings, different inline styles like bold, italic, and so on, block styles, and alignments. I can definitely see these being very useful when writing a blog post, let's say in a CMS. But let's see how we can customize these to our exact needs.
To customize this dropdown, we need to use two different configuration options, style formats and formats. Let's look first at the style formats option. This will be an array of objects that describe the different options within the dropdown. Let me just copy and paste those in.
Now each item within this array represents a menu option where the title is the label that's displayed in the dropdown and the block is the tag that will be added to the document when this style is selected by the user. Let's save that, head back over to the browser and give things a try. Now our styles are limited to only the ones that we provided. We've got a paragraph in h1 and in h2 Whoops, actually that is an h6 I accidentally added an h6 here instead of an h2.
So let's fix that really quickly refresh the page and Perfect that looks a lot better Now if we want to configure more than just an HTML tag with each style That's where the FORMATS option comes in. Here we can give a name to any new format that we'd like. Let's do a button. Then we can customize not only the HTML tag and whether it should be inline or block, but we can also customize the classes or any inline styles.
Let me copy and paste this in here. And you can see that now our button is an inline type of element. It is an a tag. It has a button class on it, and it has some various inline styles in order to make it appear as a button.
Now, in order to use this format, we have to create an option for it in the dropdown with the style formats option. This time, instead of using the block property, we'll use the format property to connect the dropdown item to the related format. Notice that this and this have to match. Now let's try out our custom styles inside of our landing page editor.
Let's say that I want to add a sign up button at the bottom of our hero section here. I'll select the text that I want to turn into a button, choose the button style from our dropdown, and sure enough, now we have a nicely styled button in our hero section. This feature makes it super easy for content editors to maintain consistent styling across the site while giving them the flexibility to use formats beyond just typical headings, bold and italic tags. Create as many formats as you need for your CMS, load certain formats for specific page types as they are needed on the different kinds of pages, and you have a robust CMS with very little effort.
Thus far, we've seen a couple of very powerful and practical applications where the tiny MC editor can speed up development and provide top-notch results. In this chapter, let's experiment with one more practical use case. That is building a content management system or CMS. CMSs are important in most any organization.
They're useful for managing blog content or internal documentation. And really, that's just the beginning. In the browser, we've got a nice page layout that's already available with some regions that are editable. This is made possible by the multi-root editing feature that we used in an earlier chapter to build the newsletter template.
This is great, but we can tailor things further to better fit the needs of a CMS use case. Let's start with the configuration of the toolbar. by adding some more styling options. vue file, I'll scroll down, find the toolbar, and let's add in the styles tool.
By default, this gives us a tool that looks like this. It's a dropdown, and it includes styles for various headings, different inline styles like bold, italic, and so on, block styles, and alignments. I can definitely see these being very useful when writing a blog post, let's say in a CMS. But let's see how we can customize these to our exact needs.
To customize this dropdown, we need to use two different configuration options, style formats and formats. Let's look first at the style formats option. This will be an array of objects that describe the different options within the dropdown. Let me just copy and paste those in.
Now each item within this array represents a menu option where the title is the label that's displayed in the dropdown and the block is the tag that will be added to the document when this style is selected by the user. Let's save that, head back over to the browser and give things a try. Now our styles are limited to only the ones that we provided. We've got a paragraph in h1 and in h2 Whoops, actually that is an h6 I accidentally added an h6 here instead of an h2.
So let's fix that really quickly refresh the page and Perfect that looks a lot better Now if we want to configure more than just an HTML tag with each style That's where the FORMATS option comes in. Here we can give a name to any new format that we'd like. Let's do a button. Then we can customize not only the HTML tag and whether it should be inline or block, but we can also customize the classes or any inline styles.
Let me copy and paste this in here. And you can see that now our button is an inline type of element. It is an a tag. It has a button class on it, and it has some various inline styles in order to make it appear as a button.
Now, in order to use this format, we have to create an option for it in the dropdown with the style formats option. This time, instead of using the block property, we'll use the format property to connect the dropdown item to the related format. Notice that this and this have to match. Now let's try out our custom styles inside of our landing page editor.
Let's say that I want to add a sign up button at the bottom of our hero section here. I'll select the text that I want to turn into a button, choose the button style from our dropdown, and sure enough, now we have a nicely styled button in our hero section. This feature makes it super easy for content editors to maintain consistent styling across the site while giving them the flexibility to use formats beyond just typical headings, bold and italic tags. Create as many formats as you need for your CMS, load certain formats for specific page types as they are needed on the different kinds of pages, and you have a robust CMS with very little effort.