This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)

if you're creating an application where your users need to be able to input text or some other content you're going to need some kind of text editor or content editor so for example maybe we're building an application for writers and we want to have some kind of Zen mode functionality so here they can toggle Zen mode and then it's all dark and then they get nicely focused on the text but they do need some place to write the text so we need some kind of text editor so in this video we're going to use the froalla text editor because it comes with a lot of Handy functionalities out of the box so if I just type in my new book you can see it keeps track of how many characters I've written I can style this as I want I can even use markdown and I can write my mark down here right so here I can create a heading I can see the output here on the right side I can add images and I can do much more but the point being is we don't want to create these text editors ourselves we want to use a professional third-party solution and in this tutorial that's going to be for voila which is also the sponsor of this video right so these rich text editors you're gonna see them a lot if you're creating some kind of application where users can create content maybe you're creating a CMS content management system or maybe you're creating some kind of email builder app so users can create their own emails or maybe you're creating some kind of a website or page builder right so users need to be able to add content and you want to use a professional solution that is a battle tested to save a lot of time and energy so we're going to look at through Ally here it's a so-called what you see is what you get editor it's very easy to integrate in a react app which is what we're going to use here and they allow you to customize this in pretty much any way you want so they have a customizer widget on their website and let me make this a little bit bigger so this is the default that you get and you can customize the toolbar as you want this is the classic editor but if you scroll down a little bit there's also an inline editor which is pretty cool because here we still have a text area but then if you highlight some text you will actually get the toolbar here right so this type of advanced customization is also possible so I'm going to show you how to integrate this in a reaction so let's start from a clean slate here I just have my page here and currently it currently only has that text so let's see we have this H1 right in Zen mode we have this paragraph some text and then we have our button here which toggles the Zen mode right so we have a state variable here which keeps track of wherever in Zen mode or not and we can toggle that by clicking on the button here if we click it it's just going to set it to the opposite and here we use that in Zen mode variable to Simply change the background color now since I'm using next to S here we have a server and client components and here I'm using use State it's only possible in a client's component so I did turn this component into a client component by using use client here now typically I don't recommend that you turn your whole page into a client component but this is just a demo app alright so now we have this and now we want to allow the users to actually write text so we're going to use rawala for that so let's actually install the libraries so I'm going to say npm install froala edit editor and then also the react bindings so for react specifically we have react dash froala dash what you see is what you get so let's see that's w y s i w y g all right so I'm gonna install that all right so it installed for me all right so then we can import a component that will actually show the editor on the page so we can import provala editor from react for voila what you see is what you get and actually this is the default export so we can import it like this we actually should import it like that and then we can try to use this so let's see where should we add this we should add it below the button so here we can try adding it to the page so I'm Gonna Save here and you can see we now have a nice editor on the page and it comes with some default settings here so here we can already do make it bold or italic or underline and if I make it a little bit wider you can see that it's now all in the toolbar here right so it's responsive by default so here if I make it less wide it will automatically adjust right so let me actually make it a little bit wider all right and then we can customize this so we have the config prop here and it's an object and let me remove this so for example we see some placeholder text here type something well maybe we want to change that we can change the placeholder text by simply writing place on the text start writing here or start writing your next book if I save here and if I refresh for a clean slate you can see we now have different placeholder text and now let's say we want to customize this widgets a little bit so maybe we want to change the toolbar we can do all the sorts of customizations here just like we saw in in that customizer widgets that throw Allah has on their website we can change the order we can determine what buttons should be visible and invisible and just to show you what we can do here I just added something here I have to place all the text so here you can use the toolbar buttons to determine which buttons we should have in the toolbar here so here we have more text so we have a button for bolt for italic for underlying and here there's more text and then we have strikethrough and there are other things I can add like subscripts and superscripts so if I just add them to my array here and there should be strings if I just add it to the array here mysterwalla is responsive by defaults it will hide the extra buttons automatically here under more text I now also have subscript and superscript right so subscript is for example when you want to place it a bit lower like this superscript is is up here let me actually zoom in a little bit right so if I zoom in here you can see that this is very easy to customize with fromala right so that's for the text itself then there's also paragraph buttons and we also have more rich and so that's for the the text itself and then we can also configure paragraph buttons as well as more rich or there are other buttons as well for example insert a horizontal line if we want to add some text here and then I'm going to have a line I can just add this line here it's a bit difficult to see because I need to zoom in but there's a line here now right so there's all sorts of customizations here to the toolbar and to this editor that we can make here in the config prop I'll remove this for now though because we're happy with the default settings let's say in terms of the toolbar buttons right so now we have our default back again right so you have a text collection of buttons then also paragraph it has indented how to align it and then a more Rich so here by default you only get horizontal line you also have undo buttons and redo and you can also select everything this is helpful if you have for example a lot of different types of elements here for example also a line multiple lines here you can just select everything and just delete it let's say now we can also determine what HTML element is rendered under the hood so usually if you have multiple lines of text you want to use a text area tag so here we can specify this I can save here we can indeed see that a text area element has been rendered on the page right so you can also configure that now what if you want to have some more advanced functionalities for example adding images well from Allah has a very modular structure so this standard widget that you get is very fast very performant and because it only contains the basic functionalities and then if you want to add something more advanced like adding images you can easily add a plugin so for example to add images here we can import a plugin and we can import that from a package that we already installed so we can import this frobala editor which we already installed and then this path and then there's plugins and then it's the image.min.js file if I save here and now if we go to the more Rich tab here you can see we now have an option to insert images so I can click here I can click on any image I can add a photo let's say and it's going to load that right here in this widget I can even customize this very nicely like this right I can replace it there's other options that we have I can align it to the left right I can remove it again if I want and that's how you can easily additional features to the standard widget you just need to import the plugin and the bundler will pick it up the script itself will automatically make sure that it's added maybe we will going to show a counter of how many characters they've already written that's another plugin that we can add very easily right so we can just import a plugin and you can find all the plugins in a documentation and but this one is called a care and then underscore counter if I save here and now when it loads you can see we now have characters in the corner here so if I type you can see it keeps track of how many characters I've written and let me zoom in a little bit and we can also easily configure these plugins so we can do that here in the same config object as the rest so we can just say care counter count so we do want to keep track of characters so we can say true here and then you can specify a maximum so we can say character counter Max maybe we only want to allow let's say 10 for this demo app so now it I can only write 10 here I cannot write more because let's say maybe we want to monetize this we want to add a pro feature so that if they go over some limit we want to prompt them we want to alert them to buy the pro membership and then and then they get access to more characters let's say so how would you know that they have reached the limit well this editor also has events right so here in config we also have events and one of the events is charactercounter dot exceeded so when the maximum is exceeded we want to run a function I'm using the traditional function syntax by the way instead of using Arrow function syntax because when you do Arrow function syntax it doesn't bind the this keyword right so you want to be careful with that with the traditional function we can use this keyword without any issues in this case that this keyword will point to the to the editor instance that's just an aside but let's say here we want to alert you have exceeded the maximum allowed characters by Pro to increase the limit so now when I type here and I type to the limits I get an alert here to prompt me to sign up for the pro membership very easy to configure all of this now what we also want to do perhaps is maybe save this to local storage so whatever the user has written maybe every couple seconds we want to automatically save that to local storage so if they accidentally close the tab or they come back later they refresh we want to be able to immediately load that from their previous visit into this editor right so to do this we can actually turn this into a controlled component and so right now this text here it's managing this Itself by itself this internal States and so just like with form elements in react when you have an input the inputs will work out of the box with internal state but we can also make them controlled elements so we can more programmatically control what's being displayed here and we can do that here as well so we can create a state variable in the forewana documentation they like to call this model and we can say set model and initially it's an empty string this will actually just be HTML of what you see in the content of this text area here right so then here we want to we want to set the value of that text area to this state variable so here we would then say that the model is model if I save now it's going to be empty because the state variable is empty initially right it's just an empty string in actually so if we go down here and now when we try to type we want to update that state variable so on model change we will get an event and we can just set the model to that event now for typescript here I do need to type this it's just going to be a string actually so just HTML and when you type it like that you do have to wrap it in parentheses okay so now let's see if I type now this is managed this is controlled by us right so now it's a controlled component and now we can work on our functionality here to automatically save it to local storage every you know couple seconds and then when the user comes back we can automatically load it from logo storage into States here and the state will then make sure that that's actually displayed in the widget right so to implement auto save functionality we can import another plugin right super easy just import this here and this one is called save that's whenever importing the save plugin and we can configure that plugin like all other plugins here in this config objects we just save interfall right so every maybe every 10 seconds but let's do every two seconds right so every two seconds there will be some safe event and we can hook into that event to actually put it in logo storage so what we can do here is right before the save event occurs so we can say save.b4 we can run a function where we will actually get that HTML content of the of the text area and here we can actually save it to local storage so we can say local storage not set item we can call that something like saved text and then actually add the HTML there I will type this for typescript it's going to be in string so now the idea here is every two seconds there will be some save event and right before this event we are running this function where we actually store that in local storage so let's actually see if that works so I'm going to open up local storage so I can go to let's see application local storage it's currently empty so now if I had 20 times something like test we should eventually after two seconds we can see something yes it's true so it's working right so after two seconds we can see saved text is is actually HTML so a better key here would be saved HTML I think so let me clean local storage Here and Now test again so every two seconds it should save so let's see after two seconds yeah and after two seconds it's automatically added here if I remove some characters only test will be available uh will be visible we see indeed after two seconds it it is updated again and now let's say I'm leaving this page and I come back later so I'm gonna refresh here it's currently empty but we want to pull it out of local storage again and display it here so how do we do that well we can use that state variable that we created so here we have model initially it's going to be an empty string but now we want to pull it out of local storage so that when we Mount this component it's going to pull it out of local storage so use State also accepts a function and it will run that function once when the component gets mounted and here we can simply get it from local storage to logo storage dot get item saved HTML and let's say the user cleared the logo storage so this may actually return null May return nothing in that case we will actually just start with an empty string so if I save here now you can see it actually shows test here so if I just write blah blah and now I refresh the page so now let's do it again try again dot right so now I'm gonna wait two seconds so it's actually save to local storage and now I'm going to refresh the page and we still see try again because it pulls it out of local storage we can continue from where we left off right all of these Advanced functionalities very easy to implement with for a while now and something else you often also want to add is markdown support right so it's very simple it's just one plugin that we can add here and it's called the markdown plugin I only have to edit here if I save now and it will reload and now you can see when I go to more Rich this tab and I click on markdown you can see we now have markdowns reports so let me actually remove this text here so now if I go to the markdown mode I can actually write a heading here test and you can see on the side it will actually render that markdown so you can see a preview of what it's going to look like right very cool is just one additional plugin so it's a very modular system so that it doesn't bloat up the standard widget right so it's very performance because you're only using the functionalities that you are explicitly importing because only the functionalities that you additionally Imports are added to the widgets instead of one big bloated component you just get a very nice modular structure to work with and I have many other plugins as well so so maybe you want to allow the users to write codes and they have a great integration with code mirror so here on the website they show an example here of the code view so here I can actually write codes also very easy to integrate now it's also good to mention that if you want to build your own plugin for some custom functionality you can also easily do that in typescript for reacts so for all of these days also supports typescript they added typescript definitions so it's also type save so here in the froalla editor if I try to add a prop blah blah which does not exist on this component I will get a warning from typescript so I can fix my mistake something I also want to show you is something similar as what we saw with markdown down so with markdown you can see the preview immediately but in other cases we also may want to show a preview because maybe the user is creating some kind of email let's say email design or some page design and we want to show a preview of the outputs of what it's going to look like so we can get another component from frawala and that's called the rawala editor view component and that comes from this package forward slash throw Allah editor View and that also is a default export from that path which we can then use to Output the rendered result of whatever we we are doing here so let's actually do that below that component so I will just render this component below there and here is another benefit of making this a controlled component because we have that model now in state so we can immediately use that model here as well and basically just the HTML so we can pass that around like that if I save here now and now I start typing here test you can see that it also is displayed below there of course I could put it on the side I can put this component wherever I want the point being now is if I add some image here I'm just going to upload an image here I immediately get a rendered result here so this is really beneficial if you're creating some kind of email design application or page builder anything where the user is creating some kind of content and you want to show what the final result will look like right also very easy to do with froalla right so for a while it's really easy to use you can integrate it in react and you can do all sorts of things with the very basic things but also very Advanced things on their website they actually have a really cool tutorial on how to build a page builder so if you want to allow your users to build their own websites or web pages you can do all of that with frawala so if you're building a dynamic content editor check out probala.com I want to thank rawana for sponsoring this video and I hope that you learned something my react nxts course is coming out soon so check out the links in the description thanks for watching and I hope to see the next one bye

Channel: ByteGrad

Views: 27,000

Keywords:

Id: O-xgS9G7A6A

Length: 17min 52sec (1072 seconds)

Published: Fri Oct 06 2023