How do I Insert a TinyMCE text Editor inside of a Dialog model window

Question

After clicking on the edit button i want to see the text editor inside the modal window however all i see is this. enter image description here Where as it should look like this.enter image description here

@model Services.Pages.Home;

<div class="container-fluid">
    <div class=" center">
        <form data-ajax="true" data-ajax-url="@Url.Action("_Block1_Edit")" method="post" data-ajax-update="#_block1" data-ajax-success="closemodal();">
        <textarea id="default-editor">
         <p><em>Hello</em>, <span style="text-decoration: underline;"><strong>World!</strong></span></p>
        </textarea>
        </form>
        <div>
            <a href="" class="button" data-ajax="true" data-ajax-url="@Url.Action("Cancel")" data-ajax-update="#modal">Close Button</a>
        </div>
    </div>
</div>

Answer 1

I now have figured out how to fix this problem

I needed to make sure that my Jquery code was correct. I changed it to this as before my selector was wrong.

function render() {
tinyMCE.remove();
tinymce.init({
    selector: 'textarea',  // select any texteditor
    height: 500,
    plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'help', 'wordcount'
    ],
    toolbar: 'undo redo | blocks | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
}

$(document).ready(function () {
    render();
});

I also improved my html

    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#MceModal">Submit</button>
<div class="modal fade" id="MceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal you</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <textarea class="form-control" placeholder="placeholder" asp-for="@Model.Content"></textarea>
            </div>
            <div class="modal-footer">
                <div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>