In the last video we have went over how
we can configure and use blocks in Rich Text Editor. In this video I'm going to
cover how we can create our own format styles using Rich Text Editor stylesheets and
configure the style formats programmatically as well. Let's see how we can add some customized
format Styles as we can see right here. So in order to do this we will need to go to
the settings section and then we need to go to Stylesheets, add a new "Rich Text
Editor Stylesheet" and let'
s call this one "RTE Styles". Then we add a new style and call
this one gradient text with a selector of that gradient text and I already have some Styles
configured, and below we can see a preview how it's going to look like. I'll just go ahead and submit.
If you go to the code we can see how it is in a normal stylesheet. Then we can save this, so now
in order to show in our block we will need to add it to our block configuration. So we will
need to enable the stylesheet "RTE Styles", subm
it save. and now if we go to our block we can see
our gradient text. So if we select our content and then select our new style we will be able
to see the styling from the one we have just configured. Then we can submit and save, however
in order to show on the frontend we will need to add the styling to the block partial. So here
we will need to add a reference to the stylesheet. And there we go. Now we have our
customized format style for our Rich Text Editor. Additionally, we are also abl
e to
add the style format programmatically however this will require us to
go back to our project locally in appSettings.json, and then we can
replace the Rich Text Editor with the following, where we set up a custom
configuration with the style formats of a header's title that includes a
heading with an H1, then heading two with an H2 and so on. Save
and then we need to restart our application. Once done we can go back into
our block. We should be able to see it under the dropdown howeve
r as we have already
set up a style we are not able to see it. So let's go ahead and disable the format
style that we have added from the backoffice and now we can go back to our content and here we can see the headers that
we have just configured programmatically. You can now create a Rich Text Editor and customize
it according to your needs, using Plugins, Blocks and Style Formats. Thank you for watching and
stay tuned for more videos on this channel!
Comments