Laravel Tutorial - WYSIWYG Editor Integration (TinyMCE)

Learn how to integrate a WYSIWYG editor in your Laravel application - this includes image upload, cropping etc. This video will explain how such an integration works, using TinyMCE as an example.

See you in the videos!

[jamescamomile]

For those like me who like to copy and wish they could copy code from a video:

<script>
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 || ||
var y = window.innerHeight||
var cmsURL =
if (type = 'image') {
cmsURL = cmsURL+'&type=Images';
} else {
cmsUrl = cmsURL+'&type=Files';
}


file : cmsURL,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
resizeble : 'yes',
close_previous : 'no'
});
}
};

tinymce.init(editor_config);
</script>

[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. :)

[deepkeshchoubey]

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...

[dotsp]

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 ;)

[yuribispo]

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

[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.

[AlokKumar-exdk]

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 : <p>These text are stored in<b> my databasse<b> table <p>
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 : <p>These text are stored in<b> my databasse<b> table <p>


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

[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.

[sagynbekk]

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

[KaushikPoojari]

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

[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...

[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 :)

[rarakirana]

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 on line 87 and defined

[maxpayne]

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

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.

[goqorgrigoryan]

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

[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

[chidiomelu]

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

[TariqSajid]

thanks for this, i was looking for it :)

[Ashish-bgji]

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.