Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
pcusa-jim opened this issue Mar 14, 2023 · 20 comments
Closed

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

pcusa-jim opened this issue Mar 14, 2023 · 20 comments

Comments

@pcusa-jim
Copy link

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
Copy link
Contributor

claudep commented Mar 14, 2023

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?

@rsevs3
Copy link
Contributor

rsevs3 commented Mar 15, 2023 •
edited

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
Copy link
Contributor

claudep commented Mar 15, 2023

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
Copy link
Author

pcusa-jim commented Mar 15, 2023 via email

@pcusa-jim
Copy link
Author

pcusa-jim commented Mar 15, 2023 via email

@rsevs3
Copy link
Contributor

rsevs3 commented Mar 15, 2023

@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
Copy link
Contributor

rsevs3 commented Mar 16, 2023

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
Copy link
Author

pcusa-jim commented Mar 16, 2023 via email

@some1ataplace
Copy link

some1ataplace commented Mar 23, 2023 •
edited

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
Copy link

Danjoe4 commented Mar 26, 2023 •
edited

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
Copy link

merwok commented Mar 26, 2023

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
Copy link

some1ataplace commented Mar 29, 2023 •
edited

@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
Copy link

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):

django-tinymce/tinymce/static/tinymce/jquery.tinymce.min.js

Lines 2 to 5 in 7756186

* Copyright (c) Tiny Technologies, Inc. All rights reserved.
* Licensed under the LGPL or a commercial license.
* For LGPL see License.txt in the project root for license information.
* For commercial licenses see https://www.tiny.cloud/
Version 6 has been re-licensed to now use the MIT license, see tinymce/tinymce#7647 and tinymce/tinymce@236891f.

@claudep
Copy link
Contributor

claudep commented Jun 13, 2023

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
Copy link
Contributor

claudep commented Feb 18, 2024

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

@jameslao
Copy link

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
Copy link
Contributor

claudep commented Feb 21, 2024

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

@claudep
Copy link
Contributor

claudep commented Mar 1, 2024

Fixed by f04e1c8

@claudep claudep closed this as completed Mar 1, 2024
@vasilistotskas
Copy link

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

@claudep
Copy link
Contributor

claudep commented Mar 5, 2024

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

@philgyford philgyford mentioned this issue Mar 14, 2024
Closed
@justinqian42 justinqian42 mentioned this issue Apr 17, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@claudep @pcusa-jim @merwok @rsevs3 @jameslao @Danjoe4 @vasilistotskas @stefan6419846 @some1ataplace