Laravel Tutorial - WYSIWYG Editor Integration (TinyMCE)

[@jamescamomile2364]

For those like me who like to copy and wish they could copy code from a video: var editor_config = { path_absolute : "{{ URL::to('/') }}/", selector : "textarea", plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor colorpicker textpattern" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media", relative_urls: false, file_browser_callback : function(field_name, url, type, win) { var x = window.innerWidth || document.documentElement.clientWidth || document.getElementByTagName('body')[0].clientWidth; var y = window.innerHeight|| document.documentElement.clientHeight|| document.grtElementByTagName('body')[0].clientHeight; var cmsURL = editor_config.path_absolute+'laravel-filemanaget?field_name'+field_name; if (type = 'image') { cmsURL = cmsURL+'&type=Images'; } else { cmsUrl = cmsURL+'&type=Files'; } tinyMCE.activeEditor.windowManager.open({ file : cmsURL, title : 'Filemanager', width : x * 0.8, height : y * 0.8, resizeble : 'yes', close_previous : 'no' }); } }; tinymce.init(editor_config);

[@AlejoElGunner]

in the line where the var cmsURL is defined, there is a little mistake, because is not laravel-filemanaget. Thank you.

[@its01]

He already included the Github repo in the video description.

[@jobeditions7794]

but the file welcome.blade.php is not there

[@MAYANKNIKKKI]

thanks a lot. :)

[@jobeditions7794]

The code is included in welcome.blade.php at the Github repo, just switch the branch to wysiwyg :)

[@awesomewhitelynx]

After hours of fighting with CKEditor throwing up html code on my blog page I've decided to use TinyMCE instead. Googled it, downloaded and launched this tutorial just to learn that I needed to use {!! !!} instead of {{ }}. But still great video, thanks. :)

[@yuribispo3815]

your videos are awesome, srsly, straight to the point.

[@academind]

Thanks so much Yuri, I'm glad you're liking them!

[@deepkeshchoubey4682]

Thanks man. I have been followed your video on you tube and recently i have purchased your angular 4 formerly 2 course from udemy and am liking that...

[@academind]

Thank you so much, so happy to have you on board here and on Udemy. Have fun with the course :)

[@dots1p]

Thank you. The part about not escaping the HTML code got me up from a dead point. At first I thought something was wrong with my database and data types... keep up the good work ;)

[@academind]

It's great to hear that this helped you - I'll do my best to keep it up :)

[@david0705]

Same here, I feel you.

[@abhishekrprasad]

@@academind I know this a really old video but we are still on Laravel 5x. My problem is that I am unable to input the text as HTML. Anything I might be doing wrong?

[@XxLuckyPoker]

Erst einmal deine Videos sind wirklich klasse und immer sehr gut erklärt. Und vielleicht könntest du ja nochmal ein Video darüber machen, was man alles beachten sollte, wenn man die Eingaben in der DB abspeichern möchte und wieder ausgibt. (Wegen XSS) Denke ich bin nicht der einzige, den das interessiert.

[@academind]

Sicherlich ein interessantes Thema, werde ich in einem künftigen Video mal aufgreifen. Danke für das super Feedback!

[@AlokKumar-ex8dk]

Hi Maximilian, I'm trying to solve one issue while displaying information on tinymce textview 1. In database data is getting stored in html format to save user detailing like bold underline ect. 2. It is displaying data correctly for first time when it loads the details from my vo object which is having db data (front end : jsp & jsf page, backend : Java EJB) 3. The issue when ever user refreshes the page or does some action where page is getting refreshed , db data is displaying in html format for example: in DB : These text are stored in my databasse table 1st time in ui it is displaying like : These text are stored in my databasse table when page is getting refreshed or reload text is displaying like : These text are stored in my databasse table My script on jsp looks like some what similar to your 's with some changes like selector is specfic_textarea and some more button on ui like save,print etc. I'm using a older version of tinymce 3.0(legacy project) I have tried to solve this using encoding to xml and html nothing worked can you please help if you have ever encounter such problem Thanks, Alok

[@TariqSajid]

thanks for this , i was looking for it :)

[@academind]

+Tariq Sajid Happy to hear this! :)

[@WellingtonRogatiOficial]

thank you very much, your videos are great!

[@academind]

Thank you very much for your comment Wellington :)

[@rafaelcardosotrentin6491]

Thank you so much

[@Insane98]

Thanks for this video :D

[@JkeyKong]

im sure you cannot work in ajax loading at 2nd ajax load for tinymce

[@KaushikPoojari]

Can we actually integrate tinymce editor with the modal that you used on Social Networking series..

[@backommd]

is it free to use it on domain? it was working for me on my local but when i push it to my remote server it dosnt work.

[@lserranoit]

Do you have videos with ckeditor?

[@adelabuelezz946]

in the second moment you copied the code to welcome page where this code please I can't find it thanks at all Where editor_config var i can't find it's code.

[@rarakirana07]

hiii,,,,help me please, this error after using Purifier ErrorException in Manager.php line 77: Missing argument 1 for Illuminate\Support\Manager::createDriver(), called in /var/www/project.com/vendor/laravel/framework/src/Illuminate/Support/Manager.php on line 87 and defined

[@ConstantinChirila]

Great tutorial, but you should probably follow up with a tutorial about how to validate this server side, because what's there is soo unsecure it's unreal :)

[@academind]

Hi Constantin, thanks for the feedback and your suggestion. Certainly an interesting task. I have lot of ideas on new content, time is the only limiting factor, but I'll put this on the list as well.

[@prochannel3145]

@@academind it's not like "omg it is so unsecure!". It's unsecure IF you allow it on frontend. It's just a normal and good thing to do, if you write something like an Admin-Panel for Content-Management-Systems etc.

[@Luqmalik]

I tried the quick install (CDN) from the website - the text area loads fine, but the toolbar doesn't load at all. I had the same problem when I installed CKeditor. Do you happen to know why this happens??? I run OS X El Capitan. -Luq

[@academind]

Not really unfortunately. Do you get any errors in the JS console (dev tools)?

[@Luqmalik]

Hey - thanks for the reply! I figured it out; it was a simple php problem, i.e., I didn't have Apache running...

[@ishraqemanjur5314]

hi there , i tried tinymce just like you did, but im getting some errors like "Failed to load: localhost:8000/asset/js/tinymce/js/tinymce/plugins/visualblock/plugin.min.js" . how do i recover this ? thank you.

[@academind]

Maybe your URL is simply wrong - make sure the plugin.min.js file is indeed placed at this path.

[@ishraqemanjur5314]

Thank you , i solved it :)

[@WillanCorreia]

Hi Max, awesome video!! but i wanted to make a drag and drop builder for page content, and a frontend customizer like wordpress. Any ideas on how to make it? or is there any solution ready? thanks...

[@academind]

+Willan Correia Hi, drag and drop could be implemented with a JS library like jQuery UI. Laravel will only serve as a backend and receive the file once JS/jQuery "extracted" it. You should be able to start by googling for "jquery ui drag and drop" and/or "jquery ui laravel" or any combinations, since it really is all about getting these two pieces to work together.

[@academind]

No, I currently don't have that. Might do one in the future, but it's not in the "to-be-released-in-next-month" pipeline

[@maxpayne6386]

Hi Max! Tell me please, why you didn't use phpstorm in your modern web development with laravel cources?

[@academind]

+Max Babii Simply because I wanted to use Cloud9 as it allows all students to get started extremely fast. And I thought it would be confusing if I explain how to use cloud9 but than don't use it myself :)

[@maxpayne6386]

Mindspace Thanks! After this course i will gain much experience to build something by myself?

[@academind]

I'm pretty confident that you will be able to build your first apps on your own, yes :)

[@maxpayne6386]

tnx for your cources

[@academind]

You're welcome Max, I'm glad you're enjoying them! :)

[@goqorgrigoryan4520]

Hi Max. As I understand it is not free anymore, yes?

[@youtube_official_user]

yes now, they flash a message to buy key

[@gabrielnzete8913]

Does this need a database set up.... Just seeing in the video but not really following yet

[@academind]

For the editor itself, you don't need a database. Of course you'll need one if you then want to save the user input though.

[@sagynbekk3852]

Thanks for great tutorial. Is there any other plugin like TinyMCE? I guess many News websites should use such plugins.

[@academind]

Popular options are TinyMCE and CKEditor. There also is Quill.js which is also great but works a bit differently than all the other eidtors

You should not download and copy the things to the public folder. Use "composer require tinymce/tinymce" instead. You can also use npm but that is more complicated and there are some complications with installing npm on homestead + laravel 7.x/8.x in Windows10.

[@Ashish-bg1ji]

Thanks for the tutorial. Great video. I got texteditor on my form but got a small problem while displaying the Editor. All toolbar of the editor is displayed on right side of editor header. and i followed as you said. but didn't work.

[@academind]

Puh, I recommend having a look at the TinyMCE docs as I never encountered such an issue. :/

[@chidiomelu5051]

I love all your videos but can you a video for password reset?

[@anujshrestha4756]

could u help me with tinymce jquery validation?

[@thelastcodebender3661]

I got this error.. NotFoundHttpException in RouteCollection.php line 179:

[@stevenyeo3162]

is tiny mce not free right now?

[@roshansharma4186]

thanks for the tutorial. Where can i get the javascript code of this tutorial??

[@academind]

Happy to hear that you're liking it! You'll find all the related code in the Github repo in the course description.

[@JesusRiveraist]

Buen video, gracias!

[@academind]

Thank you :)

[@SunilKumar-mf1fm]

is there the same editor for php ? where one can add image with content easily

[@academind]

You can use TinyMCE with any programming language, it's just a JS widget in the end. The way your connect your routes etc. will of course change, but you should be able to figure this out (and maybe find comparable file managers) for vanilla PHP apps (Google is your friend here :))

[@amluzia]

Where is the WYSIWYG ? you are doing all code there

[@frankvalen2147]

is it free to integrate

[@nishannepal9428]

plz make a video to make new other than build in language .js file for tinymce.

[@abdullahalnoman1041]

Thank You. :)

[@raafaamri976]

i can't find the javascript code !!!

[@academind]

Where? It's included in the Github Repo (in the same place as in the video)

[@heyyy4987]

how put image?

[@academind]

? Where? What? Why? More Info! ;-)

[@heyyy4987]

sorry i watch another video about how put image, its perfect.. tnks

[@academind]

Ah okay, happy to hear that!

[@vdshorts2]

Rahul gandhi spotted

[@boiledfrog9328]

Will you marry me

[@academind]

Sorry, I got a girlfriend :/

[@mosharofhossain3693]

poor explanation

[@academind]

Sorry to hear that - what exactly did you not like?

[@mosharofhossain3693]

I'm also sorry to say this. Firstly you have completed code what it requires then you have explained it. It didn't support me since I'm a beginner and I prefer- you will write code and there will be something error which I also may face. But instead of this, you are showing me the exact code. I mean show me step by step coding. So that I may not be confused. There are some confusions from where You got the script? I have to manually write it or tinymce is providing me that script? and in your provided GitHub repo there is no welcome file where you have working on this video.

[@academind]

Thanks for your feedback! The welcome file is there, you need to ensure to choose the right branch though (github.com/mschwarzmueller/laravel-playground/tree/wysiwyg-image-upload/resources/views). Sorry for the confusion about that. Regarding the other point: I do understand that. 99% of my tutorials start at zero. This one doesn't because I want to focus on the "include the editor part" and not the "build a Laravel app part". I got plenty of videos on that, that's why I chose the dive-right-in approach for this video.