Introduction: Integrating a WYSIWYG Editor
Hi, welcome back. Time for a new Laravel project. What I also read a lot in the comments is that a lot of you guys wanted to see how we can integrate a What You See Is What You Get editor in our Laravel application. So this is what we're going to do here. And this also includes image upload, of course, because that is probably the most interesting thing about it, right?
Downloading and Installing TinyMCE
But let's start with the basics. What we will use in this video is TinyMCE because I think it's a great editor, but integration kind of works similar for most of these editors. So the first thing I will do is I'll head over to TinyMCE and then just click download. And then I will, well, simply hit the download button and make sure to save it in my project. So I will store it in my source JavaScript vendor folder here.
And as you can see, I already got it there. So let me to get it exactly the same way as you have it, deleted. And now I'll extract this file, get rid of the zip file, and well, here it is. Kind of multi-layered here, but that's fine.
Preparing the Blade View
So this is the project, I'll add this to source control. And now I got my TinyMCE editor imported.
Next thing is in my welcome.blade view, I already prepared something which you will paste into it. Now, this is basically a plain setup which has a form in the middle here with our hidden session token field and with a text area, and this text area is what we want to replace with this TinyMCE editor.
Configuring TinyMCE with JavaScript
We're doing this with the code here at the bottom. And whoa, this looks extremely frightening, but let's start at the top and move through it.
So first, I'm importing this TinyMCE script. And well, this is just the path to the script file here, tinymce.min.js, which we just imported, or just added here. So this is the path I add here, and then I configure it before I then initialize it.
This here, this at the very bottom, will initialize our What You See Is What You Get editor here, and it will initialize it with the configuration we pass as an argument. Now, the first thing here is we're defining a path, and this really is just the base path of our app, which comes in important when we come to things like image download and well, everything this has to do with accessing files on our server then. So this is where we need this path_absolute thing there for.
The next one is the selector. This is very important. This defines what should be replaced with this rich-featured editor, with this What You See is What You Get editor. And we of course want to replace this text area. Therefore I'm using this textarea tag here as a selector, and you use the selector here like you know it from CSS selectors. So passing a name like this will refer to a tag, a dot at the beginning will refer to a class, of course, and a hashtag to an ID, and so on.
Next thing is, which plugins do we want to use in this editor? Because you can dynamically configure in TinyMCE which features you want and which you don't want. And this really isn't a detailed video about configuring TinyMCE, but this is how you do it. You just add a string, an array of strings, which contains all the plugins you want, like for example, allowing printing, image, and so on. And yeah, this is how you do this. Then you can configure the toolbar as will be displayed, so how your options will be grouped and in the first place available in this toolbar. And I recommend checking out the description for more information about this because there you will find a link to the TinyMCE documentation, which is the best place to get started learning the configuration of TinyMCE. Well, then I'm disabling relative URLs because I want to do all the routing absolute from this path again, important for working with files later on.
Preparing for File Management
Now, this part here is important later when we come to managing files and images, and I will explain it then. The same is true for this, so this whole part, basically what this does is it just configures our file manager, which we will later use to manage our uploads, our files we have on the server, and so on. Well, that again, this starts it with the configuration, the most important part being for this part here, the selector.
Creating the Output View in Blade
Now, before we actually see something, I'll add one more thing here. We'll call this output.blade.php file, so a new view. And I also get some code for this view. And this is very simple. It will basically just output whatever, whichever content we're submitting in our editor, in our What You See Is What You Get one.
Important thing though, here where we output this content variable, I'm using curly braces and then double exclamation marks. Why am I doing this and not the normal syntax of double curly braces? The reason is using this syntax here will not escape the HTML code if there is any. So using double exclamation marks will print or will render the HTML code instead of printing it as text. And this is of course important because what will what you see is what you get editor do? It will add HTML tags. This is how it styles it and how it saves the styling you apply in the editor. Now, all the styling would be gone and we would have all these nasty tags as plain text if we were to use normal curly braces here, which again, escape HTML tags. And this is the default, because normally you don't really want to output rendered HTML in your view because this might pose a security issue. So you have to kind of check that everything is fine there. And in this case, well, we're just making this easy and say, yeah, it will be fine, and we're just rendering it.
Setting Up Laravel Routes for Submission
Very last thing before we really see something is setting up some routes. And I already got my first route, which is fine. I will just give it a name of welcome. And then I will add a new route, which will be a post route. We'll call it /submit, or give it a path /submit. Then this will have a function which will take a request... This one here, Illuminate\Http... and make sure to get this path right: \Illuminate\Http\Request, which will of course hold the input field or the text area we submit.
And in here, I will retrieve the content and save it in a variable, so just access request->content here. And then I will return a view, the output view here, of course, and I will pass the content to the content variable I use in this view. And I will also give this route a name of submit.
Demonstration and Final Result
Now, everything should work. And if I go to my page here and reload, you can see we got our What You See Is What You Get editor right out of the box. This is all TinyMCE which we plugged in. Then we told it to replace this text area with the TinyMCE editor, and now we can use this and type some text, type it in bold as well. You might then use some bullets here. And yeah, note this image-related thing here won't work as of now. We need to implement some additional functionality for this to work. So only the basic text formatting works. If I now hit submit, you can see, well, yeah, this was saved. And as you can see, the boldness was saved, that we got a list here was saved. And this is how you use your rich editor, what you see is what you get. It will basically just generate HTML behind the scenes and then send this to your server. And there, of course, you have to handle it, save it, and in this case then output it with this double exclamation mark thing to render it to the screen.
So this is the basics of throwing in a WYSIWYG editor into your Laravel application. In the next video, we'll come to the very interesting part of using a file manager to actually be able to upload and store images mainly, but any files would work here. See you in the next videos. Bye.
