django-tinymce with django-bootstrap-modal-forms

[teelei]

I had some problems getting the TinyMCE editor to work in a bootstrap modal. The way I got it to work was to load this in the base view:

<script src="{% static 'tinymce/tinymce.min.js' %}"></script>

and these in the modal view:

<script src="{% static 'django_tinymce/init_tinymce.js' %}"></script>
<link rel="stylesheet" type="text/css" id="mce-u0" href="{% static 'tinymce/skins/ui/oxide/skin.min.css' %}">

I also needed to edit the initTinyMCE() function in django_tinymce/init_tinymce.js to first remove any existing tinymce instance:

...
const id = el.id;
if (tinyMCE.get(id)) {
    tinyMCE.remove('#' + id);
}
if ('elements' in mce_conf && mce_conf['mode'] == 'exact') {
    mce_conf['elements'] = id;
}
if (el.dataset.mceGzConf) {
    tinyMCE_GZ.init(JSON.parse(el.dataset.mceGzConf));
}
if (!tinyMCE.get(id)) {
    tinyMCE.init(mce_conf);
}
...

If the modal was closed and reopened, the tinymce textarea would not work without first removing the existing instance.

If someone knows a better way, please let me know.

[some1ataplace]

It's great to hear that you were able to get the TinyMCE editor to work in a Bootstrap modal. Your solution of loading the tinymce.min.js file in the base view and initializing the editor in the modal view is a good approach.

It sounds like you were able to successfully integrate the TinyMCE editor in a Bootstrap modal, but had to make some modifications to the initialization code to get it to work properly. Specifically, you needed to load the TinyMCE script in the base view, and then load the initialization script and skin stylesheet in the modal view.

Additionally, you had to modify the init_tinymce.js script to remove any existing TinyMCE instances before initializing a new one. This was necessary to ensure that the editor would work properly if the modal was closed and reopened.

Regarding your issue with reopening the modal, it's possible that TinyMCE is not properly destroying the existing instance of the editor when the modal is closed. Your modification to the initTinyMCE() function to first remove any existing instances of the editor may have resolved the issue and allowed the editor to work properly upon reopening the modal.

It's worth noting that there have been known issues in the past with TinyMCE and Bootstrap modals not playing nicely together, so it's possible that your solution may not work in all cases or with all versions of TinyMCE and Bootstrap. Nonetheless, your solution provides a good starting point for anyone else who may encounter a similar issue.

[BoPeng]

Hi, Could you elaborate on what problems do you have with bootstrap 5 modal? I am not using django-bootstrap-modal-forms but I am calling the modal in the similar way (using htmx). The problem I have is that the tinymce field is not "attached" to the modal form in that it returns only empty values to the underlying view, or the frontend validation will show "field is required" if the field is required.

I have followed your suggestion to load tinymce.min.js in advance and then init_tinymce.js when the dialog is loaded. I also modified init_tinymce.js as you suggested. My problem however persists so I do not know where to start.

It looks like I am htting this problem but I do not know where I should make the change to add

// Prevent Bootstrap dialog from blocking focusin
document.addEventListener('focusin', (e) => {
  if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
    e.stopImmediatePropagation();
  }
});

[BoPeng]

      if (!tinyMCE.get(el.id)) {
        mce_conf['setup'] = (editor) => {
          editor.on('change', function() {
              editor.save();
          });
        };
        tinyMCE.init(mce_conf);
      }

appears to fix the problem.

Ref: https://stackoverflow.com/questions/14393512/tinymce-textarea-and-post-form-using-ajax