Laravel 8 E-Commerce - Admin Using WYSIWYG HTML Editor on Product Page

In this video, we will learn about using WYSIWYG HTML Editor on the Product Page.

So, let's see how we can use WYSIWYG HTML Editor on the Add Product and Edit Product Page.

First of all, let's add the TinyMCE CDN to the project. For that, open a new tab and go to Google, and search for TinyMCE.

Now, click on the TinyMCE link, then click on "Sign up" to create an account. Enter your email ID and password, and click on "Create my Tiny account".

I have already created an account, so let's click on the link "Already have an account?" and enter the email ID and password, and click on "Sign in".

From the TinyMCE dashboard, let's copy the CDN and paste it inside the base layout file. Switch to the project and open the layout file.

So, go to the resource->views->layouts, and from here, let's open the base.blade.php file. Inside this file, on the page bottom, let's paste the TinyMCE CDN.

Now, let's use this on the add product component. So, open the admin-add-product-component.blade.php view file.

And inside this file, let's use the TinyMCE WYSIWYG HTML editor with short description and description. So, first of all, add the id "short_description" in the short description.

Also, add the id inside the description text area id="description". Now, inside this div, just add wire:ignore.

Also, inside this div, add wire:ignore like the 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 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 short description and description, make the changes as follows:

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

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

Now, it's done. So, let's check it. Switch to the browser and refresh the page.

Now, here you can see the TinyMCE WYSIWYG HTML editor for short description and description.

Now, let's create a product. And in short description, let's add the formatted HTML text. And also inside the description.

Now, click on submit. Product created.

Now, let's check it. So, go to the home page, and this is the newly created product.

Now, let's click on it. And now you can see here the short description and description in HTML formatted.

Now, use WYSIWYG HTML editor on the 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 the 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, let's check it. So, switch to the browser and let's refresh the page.

Now, click on the "All Products" link, then click on the edit link on this new created product.

And here you can see the TinyMCE WYSIWYG HTML editor. Now, let's change anything here.

And click on submit. Product updated.

Now, check this product, so go to 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 the Add Product and Edit Product Page.