In this video we are going to learn about using WYSIWYG HTML Editor on Product Page.
So let see how can we use WYSIWYG HTML Editor on Add Product and Edit Product Page.
First of all lets add the TinyMCE cdn to the project.
For that open new tab and go to the google and here search TinyMCE.
Now click on TinyMCE link.
Then click on signup for creating an account.
Now enter here email id and enter any password.
Now click on Create my tiny account.
I have already created an account.
So lets click on the link Already have an account?
Now enter the email id and password here and click on signin.
Rrom tinyMCE dashboard lets copy this cdn and paste inside the base layout file.
Switch to the project and lets open layout file.
So go to the resource->views->layouts.
And from here lets open base.blade.php.
Inside this file on page bottom.
Lets paste here the tinyMCE CDN.
Now lets use this on add product component.
So open admin-add-product-component.blade.php view file.
And inside this file lets use the tinymce wisiywyg html editor with short description and description.
So first of all add here here id id=“short_description” in short description.
Also add id inside the description text area id=\"description\" Now inside this div just add here wire:ignore.
Also inside this div add wire:ignore like following.

<div class=\"form-group\">
	<label class=\"col-md-4 control-label\">Short Description</label>
	<div class=\"col-md-4\" wire:ignore>
		<textarea class=\"form-control\" id=\"short_description\" placeholder=\"Short Description\"  wire:model=\"short_description\"></textarea>
		@error('short_description')  <p class=\"text-danger\">{{$message}}</p> @enderror
	</div>
</div>

<div class=\"form-group\">
	<label class=\"col-md-4 control-label\">Description</label>
	<div class=\"col-md-4\" wire:ignore>
		<textarea class=\"form-control\" id=\"description\" placeholder=\"Description\"  wire:model=\"description\"></textarea>
		@error('description')  <p class=\"text-danger\">{{$message}}</p> @enderror
	</div>
</div>

Now go to the page bottom and add here the following code.

@push('scripts')
    <script>
        $(function(){
            tinymce.init({
                selector:'#short_description',
                setup:function(editor){
                    editor.on('Change',function(e){
                        tinyMCE.triggerSave();
                        var sd_data = $('#short_description').val();
                        @this.set('short_description',sd_data);
                    });
                }
            });

            tinymce.init({
                selector:'#description',
                setup:function(editor){
                    editor.on('Change',function(e){
                        tinyMCE.triggerSave();
                        var d_data = $('#description').val();
                        @this.set('description',d_data);
                    });
                }
            });
        });
    </script>
@endpush

Now go to the details-component.blade.php view file and for rendering the html content of shrot description and description make the chnages as following.

<div class=\"short-desc\">
	{!! $product->short_description !!}
</div>

<div class=\"tab-content-item active\" id=\"description\">
	{!! $product->description !!}
</div>

Now its done so lets check it.
So switch to the browser and refresh the page.
Now here you can see the tinymce wisywyg html editor for short description and description.
Now lets create a product.
And in short description lets add the formatted html text.
And also inside the description.
Now click on submit.
Product created.
Now lets check it.
So go to the home page and this is newly created product.
Now lets click on it.
And now you can see here the short description and description in html formatted.
Now use WYSIWYG html editor on edit product component.
For that go to the admin-edit-product-component.blade.php view file and write the following code.

<div class=\"form-group\">
	<label class=\"col-md-4 control-label\">Short Description</label>
	<div class=\"col-md-4\" wire:ignore>
		<textarea class=\"form-control\" id=\"short_description\" placeholder=\"Short Description\"  wire:model=\"short_description\"></textarea>
		@error('short_description')  <p class=\"text-danger\">{{$message}}</p> @enderror
	</div>
</div>

<div class=\"form-group\">
	<label class=\"col-md-4 control-label\">Description</label>
	<div class=\"col-md-4\" wire:ignore>
		<textarea class=\"form-control\" id=\"description\" placeholder=\"Description\"  wire:model=\"description\"></textarea>
		@error('description')  <p class=\"text-danger\">{{$message}}</p> @enderror
	</div>
</div>

Also add the following code on bottom of the page.

@push('scripts')
    <script>
        $(function(){
            tinymce.init({
                selector:'#short_description',
                setup:function(editor){
                    editor.on('Change',function(e){
                        tinyMCE.triggerSave();
                        var sd_data = $('#short_description').val();
                        @this.set('short_description',sd_data);
                    });
                }
            });

            tinymce.init({
                selector:'#description',
                setup:function(editor){
                    editor.on('Change',function(e){
                        tinyMCE.triggerSave();
                        var d_data = $('#description').val();
                        @this.set('description',d_data);
                    });
                }
            });
        });
    </script>
@endpush

Now lets check it.
So switch to the browser and lets refresh the page.
Now click on all products link then click on edit link on this new created product.
And here you can see the tinymce wysiwyg html editor.
Now lets change anything here.
And click on submit.
Product updated.
Now check this product so go the home link and click on this product and you can see here the updated description and short description.
So in this way you can use WYSIWYG HTML Editor on add Product and edit product Page.