django-tinymce icon indicating copy to clipboard operation
django-tinymce copied to clipboard

Empty field value when loaded by HTMX

Open H4rryK4ne opened this issue 1 year ago • 1 comments

I don't get the content of the HTMLField if I use this in a dynamically loaded view with HTMX.

StackOverflow seems to have already some questions regarding this issue:

  • https://stackoverflow.com/questions/14393512/tinymce-textarea-and-post-form-using-ajax
  • https://stackoverflow.com/questions/69933441/getting-errolist-when-using-htmx-and-tinymce

Unfortunately, my JavaScript skills are not yet developed enough, to apply any of the proposed solutions (This is also the reason, why I was very happy to find HTMX, which solves a lot of my issue, where JS would be required)

#416 mentions a similar issue, but with bootstrap

H4rryK4ne avatar Aug 18 '23 09:08 H4rryK4ne

The fix to one of the questions you linked to will solve your problem: https://stackoverflow.com/a/24284657/1785448.

django-tinymce knows to automatically evaluate javascript functions if they are defined in python strings for specific configuration options, like "setup". So in your settings.py:

# All of the below are the defaults from django-tinymce's documentation 
TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    "height": 500,
    "menubar": False,
    "plugins": "advlist,autolink,lists,link,image,charmap,print,preview,anchor,"
    "searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table,paste,"
    "code,help,wordcount",
    "toolbar": "undo redo | formatselect | "
    "bold italic backcolor | alignleft aligncenter "
    "alignright alignjustify | bullist numlist outdent indent | "
    "removeformat | help",
    # Add a setup function to apply a fix for HTMX:
    "setup": "function (editor) {editor.on('change', function () {tinymce.triggerSave();});}",
}

sdolemelipone avatar Nov 17 '23 13:11 sdolemelipone