enter image description here I have a project for my software development course which will end in June 30. My texts in the “description” section are broken down since I am trying to edit them. It is wrapped.

View:

@model ProductVM

<div class="card shadow border-0 my-4">
    <div class="card-header bg-secondary bg-gradient ml-0 py-3">
        <div class="row">
            <div class="col-12 text-center">
                <h2 class="text-white py-2">Ürün Oluştur</h2>
            </div>
        </div>
    </div>
    <div class="card-body p-4">
        <form method="post" class="row" enctype="multipart/form-data">
            <input asp-for="Product.Id" hidden />
            <input asp-for="Product.ImageUrl" hidden />
            <div class="row">
                <div class="col-10">
                    <div class="border p-3">
                        <div class="row pb-2">
                            @* <h2 class="text-primary">Kategori Oluştur</h2> *@
                        </div>
                        @* <div asp-validation-summary="ModelOnly"></div> *@
                        <div class="form-floating py-2 col-12">
                            <input asp-for="Product.Title" class="form-control border-0 shadow" />
                            <label asp-for="Product.Title" class="ms-2"></label>
                            <span asp-validation-for="Product.Title" class="text-danger"></span>
                        </div>
                        <div class="py-2 col-12">
                            <label asp-for="Product.Description" class="ms-2 text-muted"></label>
                            <textarea asp-for="Product.Description" class="form-control border-0 shadow"></textarea>
                        </div>
                        <div class="form-floating py-2 col-12">
                            <input asp-for="Product.Characteristics" class="form-control border-0 shadow" />
                            <label asp-for="Product.Characteristics" class="ms-2"></label>
                            <span asp-validation-for="Product.Characteristics" class="text-danger"></span>
                        </div>
                        <div class="form-floating py-2 col-12">
                            <input asp-for="Product.ListPrice" class="form-control border-0 shadow" />
                            <label asp-for="Product.ListPrice" class="ms-2"></label>
                            <span asp-validation-for="Product.ListPrice" class="text-danger"></span>
                        </div>
                        <div class="form-floating py-2 col-12">
                            <select asp-for="Product.CategoryId" asp-items="@Model.CategoryList" class="form-select border-0 shadow">
                                <option disabled selected>--Kategori Seç--</option>
                            </select>
                            <label asp-for="Product.CategoryId" class="ms-2"></label>
                            <span asp-validation-for="Product.CategoryId" class="text-danger"></span>
                        </div>
                        <div class="form-floating py-2 col-12">
                            <input type="file" name="file" class="form-control border-0 shadow" />
                            <label asp-for="Product.ImageUrl" class="ms-2"></label>
                        </div>
                        <div class="row">
                            <div class="col-6 col-md-3">
                                @if (Model.Product.Id != 0)
                                {
                                    <button type="submit" class="btn btn-primary form-control">Güncelle</button>
                                }
                                else
                                {
                                    <button type="submit" class="btn btn-primary form-control">Oluştur</button>
                                }
                            </div>
                            <div class="col-6 col-md-3">
                                <a asp-controller="Product" asp-action="Index" class="btn btn-outline-primary border form-control">
                                    Listeye Geri Dön
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-2">
                    <img src="@Model.Product.ImageUrl" witdh="100%"
                    style="border-radius:5px; border:1px solid #bbb9b9" />
                </div>
            </div>
        </form>

    </div>
</div>

My scripts section for the TinyMCE Editor in the View:

 @section Scripts{
 <script>
     tinymce.init({
         selector: 'textarea',
         plugins: 'anchor autolink charmap codesample emoticons lists table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate ai mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss markdown',
         toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent',
         tinycomments_mode: 'embedded',
         tinycomments_author: 'Author name',
         mergetags_list: [
             { value: 'First.Name', title: 'First Name' },
             { value: 'Email', title: 'Email' },
         ],
         ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
     });
 </script>

If you’d like to look for the issue more in depth, there is a link for my GitHub Project:

https://github.com/LisanAlGaib96/JewelryEcomm

I am trying to update the texts but it didn’t work, also whenever I try to add image to the boxes, the font is broken.