Will this library support TinyMCE 6, and if so, is there an expected release date.

[pcusa-jim]

I'm sorry if this isn't the proper venue to ask a question like this, but we recently noted that TinyMCE 5x reaches End of Support on 4/2023 ( https://www.tiny.cloud/blog/tinymce-end-of-support/ ).

We tried configuring django-tinymce with TinyMce 6 to upgrade one of our sites, and it worked locally, but not on our server, where we receive the following JavaScript error: Uncaught TypeError: Cannot read properties of undefined (reading 'id_body') at initTinyMCE (init_tinymce.js:39:27) at init_tinymce.js:59:7 at NodeList.forEach () at HTMLDocument. (init_tinymce.js:58:43)

There is an textarea#id_body in the admin page and, as noted, it renders as a TinyMce widget locally, but not when deployed as on a server. I suspect that the javascript is loading before the HTML, but I don't know how to resolve that. Any assistance that you can provide is appreciated.

[claudep]

It will support TinyMCE 6 when someone writes the missing bits :smile:

Did you test with the latest 3.5 release or with the code in master?

[rsevs3]

Does permission need to be given to bundle the new version? Given the new licence, I would assume not?

I tried replacing with the latest version of tinyMCE with the latest code in the repo and it appears to work out of the box as best as I can tell. I had to tweak a test, to get tox to pass, I only tested against 39 and 310. Some of the language pack names have changed, so that was causing it to fail.

[claudep]

Oh, would be great to document the license issue. If it happens we are stuck on TinyMCE 5, we may then deprecate this package and recommend an alternative (or several).

[pcusa-jim]

We upgraded our site’s import to django-tinymce==3.5.0

As noted in my report, the strange thing for us is that the TinyMCE 6 widget renders when we run our Django site locally, but not when we deploy it to our production Linode/Ubuntu server.

When we run it on the server, we receive this error in a browser console: init_tinymce.js:39 Uncaught TypeError: Cannot read properties of undefined (reading 'id_body') at initTinyMCE (init_tinymce.js:39:27) at init_tinymce.js:59:7 at NodeList.forEach () at HTMLDocument. (init_tinymce.js:58:43)

This code is within the page’s html, so there an id_body element:

    <div class="form-row field-body">
            <div>
                    <label class="required" for="id_body">Body:</label>

                        <textarea class="tinymce" cols="40" data-mce-conf="{&quot;theme&quot;: &quot;silver&quot;, &quot;selector&quot;: &quot;textarea.tinymce&quot;, &quot;file_picker_callback&quot;: &quot;djangoBrowser&quot;, &quot;width&quot;: 1000, &quot;height&quot;: 400, &quot;plugins&quot;: [&quot;advlist&quot;, &quot;anchor&quot;, &quot;charmap&quot;, &quot;code&quot;, &quot;fullscreen&quot;, &quot;hr&quot;, &quot;image&quot;, &quot;imagetools&quot;, &quot;importcss&quot;, &quot;link&quot;, &quot;lists&quot;, &quot;nonbreaking&quot;, &quot;powerpaste&quot;, &quot;print&quot;, &quot;searchreplace&quot;, &quot;table&quot;, &quot;visualchars&quot;, &quot;wordcount&quot;], &quot;menubar&quot;: [&quot;file&quot;, &quot;edit&quot;, &quot;insert&quot;, &quot;view&quot;, &quot;format&quot;, &quot;table&quot;, &quot;tools&quot;], &quot;toolbar&quot;: [&quot;undo redo| bold italic | alignleft aligncenter alignright alignjustify | link anchor image code | print fullscreen&quot;, &quot;cut copy paste pastetext | searchreplace | numlist bullist | outdent indent blockquote | hr charmap | visualchars nonbreaking&quot;], &quot;imagetools_toolbar&quot;: &quot;rotateleft rotateright | flipv fliph | editimage imageoptions&quot;, &quot;extended_valid_elements&quot;: &quot;iframe[src|width|height|name|align|frameBorder],script[language|type|src],object[*],param[name|value]&quot;, &quot;image_caption&quot;: false, &quot;image_advtab&quot;: true, &quot;powerpaste_allow_local_images&quot;: true, &quot;powerpaste_word_import&quot;: &quot;prompt&quot;, &quot;powerpaste_html_import&quot;: &quot;prompt&quot;, &quot;relative_urls&quot;: false, &quot;branding&quot;: false, &quot;language&quot;: &quot;en&quot;, &quot;spellchecker_languages&quot;: &quot;Afrikaans=af,Arabic / Algerian Arabic=ar,Asturian=as,Azerbaijani=az,Bulgarian=bg,Belarusian=be,Bengali=bn,Breton=br,Bosnian=bs,Catalan=ca,Czech=cs,Welsh=cy,Danish=da,German=de,Lower Sorbian=ds,Greek=el,+English / Australian English / British English=en,Esperanto=eo,Spanish / Argentinian Spanish / Colombian Spanish / Mexican Spanish / Nicaraguan Spanish / Venezuelan Spanish=es,Estonian=et,Basque=eu,Persian=fa,Finnish=fi,French=fr,Frisian=fy,Irish=ga,Scottish Gaelic=gd,Galician=gl,Hebrew=he,Hindi=hi,Croatian=hr,Upper Sorbian=hs,Hungarian=hu,Armenian=hy,Interlingua=ia,Indonesian=id,Igbo=ig,Ido=io,Icelandic=is,Italian=it,Japanese=ja,Georgian / Kabyle=ka,Kazakh=kk,Khmer=km,Kannada=kn,Korean=ko,Kyrgyz=ky,Luxembourgish=lb,Lithuanian=lt,Latvian=lv,Macedonian=mk,Malayalam=ml,Mongolian=mn,Marathi=mr,Burmese=my,Norwegian Bokm\u00e5l=nb,Nepali=ne,Dutch=nl,Norwegian Nynorsk=nn,Ossetic=os,Punjabi=pa,Polish=pl,Portuguese / Brazilian Portuguese=pt,Romanian=ro,Russian=ru,Slovak=sk,Slovenian=sl,Albanian=sq,Serbian / Serbian Latin=sr,Swedish=sv,Swahili=sw,Tamil=ta,Telugu=te,Tajik=tg,Thai=th,Turkmen=tk,Turkish=tr,Tatar=tt,Udmurt=ud,Ukrainian=uk,Urdu=ur,Uzbek=uz,Vietnamese=vi,Simplified Chinese / Traditional Chinese=zh&quot;, &quot;directionality&quot;: &quot;ltr&quot;, &quot;mode&quot;: &quot;exact&quot;, &quot;strict_loading_mode&quot;: 1, &quot;elements&quot;: &quot;id_body&quot;}" id="id_body" name="body" rows="10">

... Because the embedded video is intended for our internal Accounting personnel rather than for the public, I’m removing the textarea content ...

                        </textarea>
            </div>
    </div>

From: Claude Paroz @.> Reply-To: jazzband/django-tinymce @.> Date: Tuesday, March 14, 2023 at 1:21 PM To: jazzband/django-tinymce @.> Cc: Jim Phares @.>, Author @.***> Subject: Re: [jazzband/django-tinymce] Will this library support TinyMCE 6, and if so, is there an expected release date. (Issue #426)

You don't often get email from @.*** Learn why this is importanthttps://aka.ms/LearnAboutSenderIdentification CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

It will support TinyMCE 6 when someone writes the missing bits 😄

Did you test with the latest 3.5 release or with the code in master?

— Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjazzband%2Fdjango-tinymce%2Fissues%2F426%23issuecomment-1468516789&data=05%7C01%7Cjim.phares%40pcusa.org%7C9564c6b4bae1466a83f108db24b0925d%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638144113037023072%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=oMxub52hTvwozq4m22vS309WyNZPp0x5rZPDa%2B9Y6l8%3D&reserved=0, or unsubscribehttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAACVSEFXSWIAIY6PJRU4GQLW4CSKFANCNFSM6AAAAAAV2UDAEQ&data=05%7C01%7Cjim.phares%40pcusa.org%7C9564c6b4bae1466a83f108db24b0925d%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638144113037023072%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=pJ2la1yriSvl13Ru9rhPM1Y5wPr8uNxQYL8BFFOWDYw%3D&reserved=0. You are receiving this because you authored the thread.Message ID: @.***>

[pcusa-jim]

I’m sorry for not responding to yesterday’s email earlier; I didn’t see it until I saw this one.

I’m unsure what you’re asking here, but is your bundle question about using a self-hosted TinyMCE implementation? If it is, that isn’t what we’re doing. We’re using the Tiny Cloud subscription implementation because we wanted premium features, most importantly spell checking.

From: Ryan Sevelj @.> Reply-To: jazzband/django-tinymce @.> Date: Wednesday, March 15, 2023 at 12:03 PM To: jazzband/django-tinymce @.> Cc: Jim Phares @.>, Author @.***> Subject: Re: [jazzband/django-tinymce] Will this library support TinyMCE 6, and if so, is there an expected release date. (Issue #426)

You don't often get email from @.*** Learn why this is importanthttps://aka.ms/LearnAboutSenderIdentification CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

Does permission need to be given to bundle the new version? Given the new licence, I would assume not?

I tried replacing with the latest version of tinyMCE with the latest code in the repo and it appears to work out of the box as best as I can tell. I had to tweak a test, to get tox to pass, I only tested against 39 and 310.

— Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjazzband%2Fdjango-tinymce%2Fissues%2F426%23issuecomment-1470313451&data=05%7C01%7Cjim.phares%40pcusa.org%7Ce7a662fc773040dddf4d08db256ed006%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638144930093537562%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=oRfmJR7jF2ESMj54bdbqk2NoT59DoTW6ooErDMw6L9o%3D&reserved=0, or unsubscribehttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAACVSECKGUPIY3ZD5MZIZNTW4HR45ANCNFSM6AAAAAAV2UDAEQ&data=05%7C01%7Cjim.phares%40pcusa.org%7Ce7a662fc773040dddf4d08db256ed006%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638144930093537562%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=q9e9%2BZwharOleiBUGvfEXXZQAatbmZAHodDCkOFiha0%3D&reserved=0. You are receiving this because you authored the thread.Message ID: @.***>

[rsevs3]

@pcusa-jim the code in master has changes that are not in the latest release on pip.

Off the top of my head, the two files with changes that got it working for me were the widgets.py and init_tinymce.js. See #417

I am not sure if that will solve your problem, but it is what got version 6 working at my end.

@claudep the new licence is MIT, so I don't think there will be a problem.

[rsevs3]

Just some additional information for this, the way that images_upload_handler works is different.

See: https://www.tiny.cloud/docs/tinymce/6/image/#images_upload_handler

In the new example code, example_image_upload_handler is declared as a const, so is not a property of the window object.

See for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#description

I am fairly new to coding and have virtually no JS experience, so I do no know how to rewrite this to make it work. I have played around with putting the example code into init_tinymce.js and modifying to suit, which works, but isn't easily user changeable, so not a good solution. I have spent all day trying to find a nice solution, but it is beyond my skill levels currently.

[pcusa-jim]

It probably shouldn’t have taken me this long to figure out how to do what you suggested, but we typically install our libraries from pypi rather than github, and as I understand it pypi only has releases, so I didn’t know how to install master.

Today, I was able to get back onto this issue and found this reference to master’s commit: https://github.com/jazzband/django-tinymce/commit/fe9d1e09e0bbca1d43e0e1f5ac03acdaacc37cf3 That provided me with the commit, so I went onto the server, source activated the site’s environment and ran: pip install -U @.***

Then I touched our project’s uwsgi.ini using a deploy script (that’s standard to our sites) to restart the site. At that point, the site’s admin tinyMCE widget worked with tinyMCE 6. Thanks much, Jim Phares

From: Ryan Sevelj @.> Reply-To: jazzband/django-tinymce @.> Date: Wednesday, March 15, 2023 at 2:12 PM To: jazzband/django-tinymce @.> Cc: Jim Phares @.>, Mention @.***> Subject: Re: [jazzband/django-tinymce] Will this library support TinyMCE 6, and if so, is there an expected release date. (Issue #426)

You don't often get email from @.*** Learn why this is importanthttps://aka.ms/LearnAboutSenderIdentification CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

@pcusa-jimhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpcusa-jim&data=05%7C01%7Cjim.phares%40pcusa.org%7C2c233ed888814cb48ab108db2580dda0%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638145007654275693%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=7jxWcXURsQKBubZd1YXzMav3aK%2BcKhm4qOTQ%2FzZmWUc%3D&reserved=0 the code in master has changes that are not in the latest release on pip.

Off the top of my head, the two files with changes that got it working for me were the widgets.py and init_tinymce.js. See #417https://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjazzband%2Fdjango-tinymce%2Fissues%2F417&data=05%7C01%7Cjim.phares%40pcusa.org%7C2c233ed888814cb48ab108db2580dda0%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638145007654275693%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=S3uDaxToiiHJWn4I%2B9uo8w51KJ4EOffoW6pw8%2FK2hz4%3D&reserved=0

I am not sure if that will solve your problem, but it is what got version 6 working at my end.

@claudephttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fclaudep&data=05%7C01%7Cjim.phares%40pcusa.org%7C2c233ed888814cb48ab108db2580dda0%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638145007654275693%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=qJy54gI4BvthiIRfdg%2F6lqGdCdOPKRkRZoUsxyGCskU%3D&reserved=0 the new licence is MIT, so I don't think there will be a problem.

— Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjazzband%2Fdjango-tinymce%2Fissues%2F426%23issuecomment-1470524126&data=05%7C01%7Cjim.phares%40pcusa.org%7C2c233ed888814cb48ab108db2580dda0%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638145007654275693%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=qoeeAMU93AQDkVv3T64on4XlSXoVWT2ORoU56IKCG8Y%3D&reserved=0, or unsubscribehttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAACVSEFAEMKEOAUMUHJPBMDW4IBBRANCNFSM6AAAAAAV2UDAEQ&data=05%7C01%7Cjim.phares%40pcusa.org%7C2c233ed888814cb48ab108db2580dda0%7C99082a1a70af459fa6ac8ad01476a157%7C0%7C0%7C638145007654431923%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=lxix0OdNx46UuCzDlLmIW%2FkCZ13BBedjsgBy03SllBY%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.***>

[some1ataplace]

https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/

https://www.tiny.cloud/blog/upgrade-to-tinymce-6/

1. Install the latest version of TinyMCE 6 using your preferred method (e.g. via CDN or by downloading the files).

2. Replace the existing TinyMCE files in your Django-tinymce installation with the new TinyMCE 6 files.

3. In your Django settings file, update the TINYMCE_DEFAULT_CONFIG to use the new version of TinyMCE:

TINYMCE_DEFAULT_CONFIG = {
    # ... other options ...
    'tinymce_version': '6',
    'external_plugins': {
        'tiny_mce_wiris': '/static/tinymce/plugins/tiny_mce_wiris/plugin.min.js',
        # ... other external plugins ...
    },
    'toolbar': 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry',
    # ... other options ...
}

In this example, we're setting the tinymce_version option to '6' to indicate that we're using TinyMCE 6. We're also updating the external_plugins option to use the new plugin file for the Wiris Math and Chemistry plugins, and updating the toolbar option to use the new toolbar button names and ordering.

Note that depending on your specific use case, you may need to make additional changes to your TinyMCE configuration to fully support TinyMCE 6.

Download the latest version of TinyMCE 6 from the TinyMCE website (https://www.tiny.cloud/get-tiny/self-hosted/).

Extract the contents of the downloaded package and update the relevant paths in your Django project.

In your Django settings file, update the TINYMCE_JS_URL setting to point to the new tinymce.min.js file:

TINYMCE_JS_URL = STATIC_URL + 'path/to/tinymce/tinymce.min.js'

(OPTIONAL) If you were using the mobile theme in your previous setup, make sure to copy the mobile folder from the previous TinyMCE version to the new TinyMCE 6 folder.

(OPTIONAL) If you were using plugins in your previous setup (e.g. django-tinymce-filebrowser), you may need to update

---

The additional changes needed to fully support TinyMCE 6 in Django-tinymce will depend on your specific use case and the features you're using. Here are a few examples:

1. If you're using custom plugins or themes, you may need to update them to be compatible with TinyMCE 6.

2. If you're using custom buttons in your toolbar, you may need to update their names or icons to match the new button names and icons in TinyMCE 6.

3. If you're using custom CSS to style your TinyMCE editor, you may need to update it to match the new CSS classes and selectors used in TinyMCE 6.

4. If you're using custom JavaScript to interact with the TinyMCE editor, you may need to update it to use the new API and event names in TinyMCE 6.

5. settings.py: Update the TINYMCE_DEFAULT_CONFIG dictionary to include the new configuration options for TinyMCE 6, as shown in my previous response.

6. static/tinymce/: Replace the existing TinyMCE files with the new TinyMCE 6 files. You can download the latest version of TinyMCE from the official website (https://www.tiny.cloud/get-tiny/self-hosted/) or use a CDN.

7. templates/: If you have customized the TinyMCE templates, you may need to update them to match the new version of TinyMCE.

8. views.py: If you have customized the TinyMCE views, you may need to update them to match the new version of TinyMCE.

Overall, the key to fully supporting TinyMCE 6 in Django-tinymce is to carefully review the TinyMCE 6 documentation and update your configuration and code as needed to match the new features and changes in the latest version.

[Danjoe4]

Unfortunate, I wish the folks at TinyMCE would take on this project officially. This integration is nice but I can't justify starting a project using it. I just integrated the zip, and wrote LESS code than with this package. Unlike the tinymce-react integration, the layer of abstraction this integration provides actually makes things harder. This project is not in state where it can be recommended for any project.

[merwok]

That’s not entirely fair; the custom model field makes it very easy to get a rich text editor for specific fields, without needing to define custom form or formfield_overrides everywhere.

[some1ataplace]

@rsevs3 Can you share with us all the steps and where in the code you made changes so far? One of us here might be able to help you.

We need to somehow modify the following line in init_tinymce.js to fix this issue's original error:

const el = document.getElementById(field_info['id_body']);

Replace it with:

const el = document.getElementById(field_info['id']);

Just so you all know... ckeditor and tinymce are owned by the same company now.

[stefan6419846]

Oh, would be great to document the license issue.

What do you mean by this? TinyMCE before version 6 uses LGPL-2.1, although it is not really clear whether this means LGPL-2.1-only or LGPL-2.1-or-later from the file headers (assuming that it would be LGPL-2.1-only as not stated otherwise): https://github.com/jazzband/django-tinymce/blob/775618637ab7708394f057f49b54202c4bac2133/tinymce/static/tinymce/jquery.tinymce.min.js#L2-L5 Version 6 has been re-licensed to now use the MIT license, see https://github.com/tinymce/tinymce/pull/7647 and https://github.com/tinymce/tinymce/commit/236891ffcdf2fd1b698d020e67c31838fb110019.

[claudep]

Thanks for this clarification. Now looks like all is left is someone biting the bullet and suggest a patch with the latest TinyMCE 6 code.

[claudep]

PR #457 implements the migration to TinyMCE 6. Any test/review would be greatly appreciated!

[jameslao]

PR #457 implements the migration to TinyMCE 6. Any test/review would be greatly appreciated!

Seems to be working great as far as I can see. Great work!

[claudep]

Thanks for checking :heart: I'll let the PR open some more days for further reviews.

[claudep]

Fixed by f04e1c8

[vasilistotskas]

So we are waiting for a new release that uses tiny mce 6?

[claudep]

Yes, that's it. I hope that we may get some feedback from people using the master branch.