TinyMCE Editor is not editable in jQuery dialog box opened inside Partial View

Question

I'm opening jQuery dialog box inside Partial View.

$("#divAddPara").dialog({
   heightStyle: "content",
   width: "600px",
   modal: true,
   open: function (event, ui) {
      $(".ui-dialog-titlebar-close").hide();
      $(".ui-draggable .ui-dialog-titlebar ").css("display", "none");
      }
   });

The jQuery dialog box has TinyMCE Editor.

    <div id="divAddPara">   
        <h4><b>Add New Paragraph</b></h4>       
        <table id="t03" style="margin:10px 0px 20px 0px;" cellpadding="0" cellspacing="0">
          <tr>
            <td> 
              @Html.TextAreaFor(model => model.AboutMe)
              @Html.ValidationMessageFor(model => model.AboutMe)
            </td>
          </tr>
       </table>
   </div>  

The Editor opens in dialog box but I'm unable to enter any text inside the editor.

Is there a way to make the content editable?

Answer 1

What is likely happening is the "dialog" you have open is trying to hold onto the focus - so it can act like a modal dialog. If it does this TinyMCE and its dialogs likely cannot grab the focus to allow you to type into them.

Most "modal" dialog tools have a way to relinquish focus. For example you can do this with Bootstrap:

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});

Source: https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

I would assume that your dialog choice can do something similar.