Coding

Laravel Tutorial – WYSIWYG Editor Integration (TinyMCE)

  • 00:00:00 hey welcome back time for you laravel
  • 00:00:03 project well I also read a lot of the
  • 00:00:06 comments is a lot of you guys wanted to
  • 00:00:09 see how we can integrate what you see is
  • 00:00:12 what you get editor in our allowable
  • 00:00:15 application so this is what we're going
  • 00:00:16 to do here and this also includes image
  • 00:00:19 upload of course because that is
  • 00:00:21 probably the most interesting thing
  • 00:00:22 about it right but let's start
  • 00:00:24 activating the basics what I want use in
  • 00:00:27 this video is tiny MC because I think
  • 00:00:29 it's a great editor but integration kind
  • 00:00:33 of works similar for most of these
  • 00:00:35 editors so the first thing I will do is
  • 00:00:38 I'll head over to tiny MCE I don't just
  • 00:00:44 click download and then I will simply
  • 00:00:48 get the download button and make sure to
  • 00:00:51 save it in my project so I will stir it
  • 00:00:56 in my source JavaScript vendor folder
  • 00:00:59 here and as you can see I already got it
  • 00:01:03 there so let me get get it exactly the
  • 00:01:09 same way as you have it delete it now
  • 00:01:13 extract this file get rid of the zip
  • 00:01:18 file and well you're it is kind of
  • 00:01:25 multi-layered here of letters that's
  • 00:01:28 fine so this is the project I'll add
  • 00:01:32 this to source control and now I got my
  • 00:01:35 well tiny MC editor imported next thing
  • 00:01:41 is in my welcome to play for you I
  • 00:01:43 already prepared something which you
  • 00:01:47 will paste into it now this is basically
  • 00:01:49 a plain setup which has a form in the
  • 00:01:53 middle here with our hidden session
  • 00:01:57 token field and with a text area and
  • 00:02:00 this text area is what we wanted to
  • 00:02:02 replace with this tiny MCE editor we're
  • 00:02:06 doing this with the killed here at the
  • 00:02:08 bottom and whoa this looks extremely
  • 00:02:10 frightening but
  • 00:02:12 let's start at the top and move through
  • 00:02:14 it so first I'm importing this well tiny
  • 00:02:19 MCE script and well this is just the
  • 00:02:22 path tutors
  • 00:02:28 file here tiny MCE MnDOT yes which we
  • 00:02:33 just imported we're just added here so
  • 00:02:36 this is to pop I add here and then I
  • 00:02:39 well configure it before I then
  • 00:02:43 initialize it this year does it the very
  • 00:02:45 bottom will initialize or our watches
  • 00:02:48 these what you get editor here and it
  • 00:02:51 will initialize it with the
  • 00:02:53 configuration we pass as an argument
  • 00:02:55 now the first thing here is we're
  • 00:02:59 defining a path and this really is just
  • 00:03:01 70 base path or app which comes in
  • 00:03:05 important when we come to things like
  • 00:03:07 image download and well everything this
  • 00:03:12 has to do with accessing files on our
  • 00:03:14 server then so this is where we need to
  • 00:03:17 spell obsolete fingers one the next
  • 00:03:20 one's the selector this is very
  • 00:03:22 important this defines what should be
  • 00:03:25 replaced with this rich featured editor
  • 00:03:28 with this what-you-see-is-what-you-get
  • 00:03:30 editor and we of course want to replace
  • 00:03:32 this text area therefore I'm using this
  • 00:03:34 text area tag here as a selector and you
  • 00:03:37 use the selector you like you use I can
  • 00:03:40 know it from CSS selectors so passing a
  • 00:03:43 name like this will refer to a tag a dot
  • 00:03:45 at the beginning will refer to a class
  • 00:03:48 of course and a half tag to an ID and so
  • 00:03:51 on next thing is which plug-in still we
  • 00:03:55 want to use in this editor because you
  • 00:03:57 can dynamically configure in tiny MCE
  • 00:04:00 which features you want and which you
  • 00:04:02 don't want and this really isn't a
  • 00:04:04 detailed video about configuring tiny
  • 00:04:06 MCE but this is why you do it it just
  • 00:04:09 add well a string an array of strings
  • 00:04:14 which contains all the plugins you want
  • 00:04:17 like for example along printing image
  • 00:04:20 and so
  • 00:04:21 and this how it is then you can
  • 00:04:24 configure the toolbar as well we
  • 00:04:26 displayed so how your options will be
  • 00:04:29 grouped and well in the first place
  • 00:04:31 available in this toolbar and I
  • 00:04:33 recommend checking out description for
  • 00:04:36 more information about this because
  • 00:04:38 there you will find a link to the tiny
  • 00:04:40 MCE documentation which well it's the
  • 00:04:43 best place to get started learning the
  • 00:04:45 configuration of tiny MC well then I'm
  • 00:04:48 disabling relative URLs because I want
  • 00:04:50 to do all the routing absolute from this
  • 00:04:54 path again important for working with
  • 00:04:57 files later on now this part here is
  • 00:05:03 important later when we come to managing
  • 00:05:05 files images and I will explain them the
  • 00:05:09 same is true for this so this whole part
  • 00:05:11 basically what this does is it just
  • 00:05:13 configure is our file manager which we
  • 00:05:17 will later use to well-managed our
  • 00:05:20 uploads our files we have on the server
  • 00:05:22 and so on well then again this started
  • 00:05:25 with the configuration the most
  • 00:05:26 important part being for this part here
  • 00:05:28 the selector now before we actually see
  • 00:05:33 something I'll add one more thing here
  • 00:05:35 or would call this output stoplight dot
  • 00:05:38 PHP file so a new view and I also get
  • 00:05:42 some code for this view it is very
  • 00:05:44 simple and well basically we'll just
  • 00:05:47 output without whichever content were
  • 00:05:50 submitting in our editorial
  • 00:05:53 what-you-see-is-what-you-get intro one
  • 00:05:55 important thing though here where we
  • 00:05:57 output this content variable I'm using
  • 00:06:00 curly braces and then double exclamation
  • 00:06:02 marks why are you doing this and not
  • 00:06:05 well the normal syntax of double curly
  • 00:06:08 braces the reason is using this syntax
  • 00:06:12 here will not escape the HTML code if
  • 00:06:16 there is any so using double exclamation
  • 00:06:18 marks will print or will render the HTML
  • 00:06:23 code instead of printing a test text and
  • 00:06:27 this is of course important because what
  • 00:06:29 we'll do
  • 00:06:29 you see is what you get editor do it
  • 00:06:32 we'll add HTML tags this is how it
  • 00:06:34 styles it and how it face the styling
  • 00:06:37 you apply the editor and how all the
  • 00:06:39 style would be gone and we would have
  • 00:06:41 all these nasty tags as plain text if we
  • 00:06:44 were to use normal calling braces here
  • 00:06:47 which again escape HTML tags and this is
  • 00:06:51 default because normally you don't
  • 00:06:53 really want to output rendered HTML in
  • 00:06:56 your view because this might pose a
  • 00:06:58 security issue so you have to kind of
  • 00:07:01 check that everything is good finder and
  • 00:07:04 in this case well we're just making it
  • 00:07:07 easy as idea it will we find our
  • 00:07:09 merchants rendering it very last thing
  • 00:07:12 before we really see something as
  • 00:07:14 setting up some routes and I already get
  • 00:07:19 my first route which is fine I will just
  • 00:07:21 give it a name of welcome and then I
  • 00:07:25 will add a new route which will be a
  • 00:07:26 post route to the call slash summit will
  • 00:07:30 give a pop slash submit then doesn't
  • 00:07:32 have a function which will take a
  • 00:07:35 request Ave this one here illuminate
  • 00:07:39 HTTP and make sure to get this path
  • 00:07:43 right backslash human a backslash HTTP
  • 00:07:46 backslash request which will of course
  • 00:07:49 hold the improve literal text area we
  • 00:07:52 submit and then here ability to retrieve
  • 00:07:56 the content and save it in a variable so
  • 00:07:58 just access request content here and
  • 00:08:03 then I will return the view out of you
  • 00:08:08 here of course now we'll pass the
  • 00:08:11 content to the content variable I use in
  • 00:08:14 this view and also give this route a
  • 00:08:21 name of submit now every ship everything
  • 00:08:24 should work in the play go to my page
  • 00:08:27 here and reload you can see we got or
  • 00:08:30 what you see is what you get a directory
  • 00:08:32 right out-of-the-box this is all tiny FC
  • 00:08:35 which we plugged in then we told it to
  • 00:08:38 replace this text or
  • 00:08:39 with a tie the MC editor and now we can
  • 00:08:43 use this and type some text type it in
  • 00:08:49 bold as well you might then use some
  • 00:08:54 bullets here and yeah note this image
  • 00:09:00 layer finger won't work as of now we
  • 00:09:04 need to implement some additional
  • 00:09:05 functionality for this to work so only
  • 00:09:08 the basic text formatting works if I now
  • 00:09:10 hit submit you can see well yeah this
  • 00:09:14 was saved and as you can see the
  • 00:09:16 boldness was saved that we got last year
  • 00:09:18 was saved and it's how you use your rich
  • 00:09:21 editor review what you see is what you
  • 00:09:24 get it towards it will basically just
  • 00:09:26 generate HTML behind the scenes and then
  • 00:09:29 send this to your server and door there
  • 00:09:32 of course you have to handle it save it
  • 00:09:33 and in this case then output it with
  • 00:09:35 this double exclamation mark thing to
  • 00:09:38 render render it to screen so this is
  • 00:09:41 the basics of throwing in a WYSIWYG
  • 00:09:45 editor into your lateral application in
  • 00:09:49 the next video we'll come to the very
  • 00:09:50 interesting part of using a file manager
  • 00:09:54 to actually be able to upload and store
  • 00:09:58 well images mainly but any files would