- 00:00:01 hi welcome back in the last part we left
- 00:00:05 when we had our editor set up and we
- 00:00:08 could well use it we could write a bold
- 00:00:11 create lists and so on but one very
- 00:00:13 interesting part is missing the image
- 00:00:16 upload now this is something which is a
- 00:00:19 very complex and I'll be honest we won't
- 00:00:23 write all the logic the back and logic
- 00:00:25 here on our own though I will truly out
- 00:00:28 that I will make some videos about file
- 00:00:30 management creating your own file
- 00:00:32 manager in the future but right now what
- 00:00:35 I will use is this lateral file manager
- 00:00:38 of a uni sharp and you will find a link
- 00:00:40 skit have repository in the description
- 00:00:42 which is a great file manager and best
- 00:00:46 thing is it is well kind of configured
- 00:00:50 to work great with tiny MCE and ckeditor
- 00:00:54 and it is really easy to set up and to
- 00:00:58 get going and yet as you can already see
- 00:01:01 in the screenshot here it not only
- 00:01:03 allows allows you to pick up file
- 00:01:05 uploaded it allows you to manage all the
- 00:01:07 files on your lateral application or in
- 00:01:10 your lateral application on your disks
- 00:01:12 you have there so really great thing and
- 00:01:15 as I said might definitely be
- 00:01:17 interesting to create something like
- 00:01:18 this in future videos but as this is a
- 00:01:21 very complex project I really only want
- 00:01:25 to focus on getting this going in tiny
- 00:01:27 MCE so that you can get started right
- 00:01:29 away because that really is an important
- 00:01:32 part of programming to knowing how to
- 00:01:35 use for party packages and saving time
- 00:01:37 by using them there is nothing bad about
- 00:01:40 that so first thing us we need to
- 00:01:44 install it and we can follow the
- 00:01:46 installation document here it's really
- 00:01:50 easy first thing is I'll well I will
- 00:01:53 just basically copy all these lines here
- 00:01:55 I'll go to my command line here and I
- 00:02:00 will require it via composer
- 00:02:03 this will take a couple of seconds and
- 00:02:06 we'll then add it to our approach
- 00:02:07 and install it I'll be back once it's
- 00:02:10 done cool so my installation just
- 00:02:13 finished and now this was the first step
- 00:02:17 the next step as described here is to
- 00:02:21 take these service providers here and
- 00:02:24 add them in our application in the
- 00:02:26 config directory the app dot PHP file
- 00:02:29 here at the bottom this will actually
- 00:02:36 register them in our egg look in our
- 00:02:39 angular in our level application without
- 00:02:42 these lines here yes we have installed
- 00:02:45 it but level would not use it and would
- 00:02:47 not know how to use it because this kind
- 00:02:49 of is the interface written by the
- 00:02:52 creators of the third-party packaging
- 00:02:54 you need to do this for every third
- 00:02:55 party package you might produce to tell
- 00:02:59 their world how to use it how to use
- 00:03:01 this package so this is these are the
- 00:03:05 service providers next thing is fs8 here
- 00:03:07 I'm going to import and then I will need
- 00:03:15 to run these two commands here to
- 00:03:18 actually publish the own configuration
- 00:03:22 file this word party package ships with
- 00:03:25 and if we know how to look in our a
- 00:03:26 config folder we see this new file this
- 00:03:32 l of m dot PHP this was just added by
- 00:03:36 this published command which allows for
- 00:03:38 party packages to copy files into your
- 00:03:41 main application because you might need
- 00:03:42 to access them there and we do need to
- 00:03:45 access this configuration file which
- 00:03:47 configures our file manager the first
- 00:03:50 thing I'll do is I will disable the
- 00:03:52 renaming of files because this word
- 00:03:55 we're use ready and I won't don't want
- 00:03:58 to restrict us to only locked in users
- 00:04:00 now this is all fine here but here we
- 00:04:04 need to change off to web because well
- 00:04:07 of indications not only something we
- 00:04:09 want to enforce but the web malware is
- 00:04:12 important for this to work correctly I
- 00:04:13 also want a line below
- 00:04:16 to user access here and well the rest
- 00:04:20 ship you find as it shifts with and as
- 00:04:22 you can see you can configure which
- 00:04:24 types of files you want to be able to
- 00:04:26 handle and you can see tells us much
- 00:04:28 more than just some images here where to
- 00:04:32 store them on your your application also
- 00:04:35 we're important and yeah and so on so
- 00:04:40 just a basic configuration this is how
- 00:04:41 we need to have it set up and now coming
- 00:04:45 back to this welcome to plated PHP file
- 00:04:47 here I said that this part here is
- 00:04:51 related to the file manager and it is
- 00:04:53 and what does it do well it basically
- 00:04:56 defines the dimensions of our window
- 00:04:59 here and then just defines basically
- 00:05:04 which which layout to load or yeah how
- 00:05:07 to load this file manager so this is
- 00:05:09 important for this recording package
- 00:05:12 however file browser callback is a
- 00:05:15 configuration provided by tiny MCE and
- 00:05:18 if we were to write our own file browser
- 00:05:20 we needed to implement this function and
- 00:05:23 tell tiny MCE what you do whenever the
- 00:05:26 user clicks this file manager button
- 00:05:29 which basically is the button next to
- 00:05:31 the I want to upload an image thing so
- 00:05:35 this is very important and this is the
- 00:05:37 configuration as we need it for it as
- 00:05:40 file into reusing here the lateral
- 00:05:42 vitamin planet shirt we're correcting it
- 00:05:44 only works for this file manager that's
- 00:05:46 very important
- 00:05:47 this has to be hand tailored to
- 00:05:49 whichever file mentor you use and you
- 00:05:52 can see the setup here in the
- 00:05:55 integration part where basically it is
- 00:05:58 described how you can integrate it with
- 00:06:00 tiny FC and this is pretty much the same
- 00:06:03 code you'll see here I just copied it
- 00:06:06 from there and it also describes how to
- 00:06:09 use it with ckeditor or independent of
- 00:06:12 any well what you see is what you get
- 00:06:15 and for because the end it's a file
- 00:06:16 entry you might use it in whichever way
- 00:06:19 you want it doesn't have to be limited
- 00:06:21 to a rich editor you
- 00:06:24 just have normal button which you should
- 00:06:26 trigger file upload so this is how you
- 00:06:29 use it and here is more information
- 00:06:31 about how to configure it and lastly how
- 00:06:35 to customize it of course now with all
- 00:06:39 this is there anything else we have to
- 00:06:42 do no let's reload and now let's click
- 00:06:45 this insert edit image button here now
- 00:06:49 here we could enter semi URL but you can
- 00:06:53 also click this file enter button I was
- 00:06:55 talking about which will trigger this
- 00:06:58 file browser callback function here and
- 00:07:02 which will open up our file mature as
- 00:07:06 you can see I already uploaded one file
- 00:07:08 but I will upload a new one here let's
- 00:07:12 click this button and let's say well
- 00:07:14 I'll just upload this image here so now
- 00:07:18 I got my images here and I can easy even
- 00:07:22 resize and drop them and you can see my
- 00:07:27 awesome Amazon purchases here and yeah
- 00:07:33 so really a great functionality this
- 00:07:36 editor has built-in this is the reason
- 00:07:38 why we are using it this would be a
- 00:07:39 whole lot of work to create your own and
- 00:07:42 as you can see you can really do a lot
- 00:07:46 here you can create new folders and so
- 00:07:48 on so it is a fully fledged file lantern
- 00:07:50 not limited to image upload but of
- 00:07:53 course does or it is and it does offer
- 00:07:56 resizing and cropping and so on now back
- 00:08:00 into this folder I can then select this
- 00:08:03 image here ok now you can see is edited
- 00:08:06 here I can click Submit and I got it on
- 00:08:08 the next page – obviously not style this
- 00:08:11 will have to be done by you but this is
- 00:08:14 how it works and how you can integrate
- 00:08:16 tiny MCE and a file manager to manage
- 00:08:19 what files and uploads in your level
- 00:08:23 application lastly let's have a look
- 00:08:25 where these files are saved at and as
- 00:08:27 you can see I got this photos folder
- 00:08:29 here ways where it to say
- 00:08:30 well this is done in this place because
- 00:08:33 in my configuration file for a file
- 00:08:36 enter I specified the public folders
- 00:08:39 should be the place where images are
- 00:08:41 saved and of course I could use our
- 00:08:44 places yourtube now I hope this helps
- 00:08:49 you and yeah I hope this helps you get
- 00:08:52 going with your applications that
- 00:08:53 integrate such a editors there see you
- 00:08:56 in the next videos bye
