tinymce not defined - Githubissues

lekoala commented 4 years ago

I'm hitting the following issue on the latest stable version. I'm also using fluent (not that i know if it makes any difference). It mostly happens in a ModelAdmin when creating new records. Refreshing the page works fine, it's when I create a record from the list.

I suspect there is some issues in terms of loading order. I can see that /assets/_tinymce/tinymce-cms-a311274ba0.js is being loaded fine, but probably some code is calling it in bundle.js before it's loaded when doing the ajax load.

vendor.js?m=1573658286:1 Uncaught exception ReferenceError: tinymce is not defined
    at Object.create (bundle.js?m=1573658286:1)
    at Object.init (bundle.js?m=1573658286:1)
    at init.onadd (bundle.js?m=1573658286:1)
    at i (vendor.js?m=1573658286:1)
    at init.onadd (vendor.js?m=1573658286:1)
    at init.onmatch (bundle.js?m=1573658286:1)
    at Array.l [as onmatchproxy] (vendor.js?m=1573658286:1)
    at HTMLDocument.<anonymous> (vendor.js?m=1573658286:1)
    at HTMLDocument.dispatch (eval at e.exports (vendor.js?m=1573658286:1), <anonymous>:3332:9)
    at HTMLDocument.eventHandle (eval at e.exports (vendor.js?m=1573658286:1), <anonymous>:2941:28) in onmatch on

culprit seem to be in these lines

var n = void 0
                          , r = void 0
                          , o = void 0
                          , i = this.getConfig();
                        void 0 !== i.baseURL && (tinymce.EditorManager.baseURL = i.baseURL),
                        tinymce.init(i).then(function(e) {
                            e.length > 0 && e[0].container && $(e[0].container).closest(".panel--scrollable").on("scroll", function(e) {
                                return t(e)
                            })
                        })

how can bundle.js be sure that everything is indeed loaded? i'm also loading a couple of other js files that seem to happen before loading tinymce-cms which may explain why in my case that loading order matters

lekoala commented 3 years ago

So since i had the bug again and found my own issues back (yeahh!)... but this time, i have a proper bug report @emteknetnz

Description

When navigating from a model admin list to a record with an html editor field, the html editor field fails to load It works fine if you reload the page with the edit form

Steps to Reproduce

Do a fresh load on a ModelAdmin instance
Try to edit a record that contains an html editor field => it won't load because it needs to load the tinymce config generated by TinyMCECombinedGenerator first (which is done through x-include-js

Solution

I tracked down the issue to

https://github.com/silverstripe/silverstripe-admin/blob/f5629eaa6857464da9ea74e893e280b9c28886b1/client/src/legacy/HtmlEditorField.js#L340

I guess entwine may fire before the ondemand headers are processed. entwine needs to call onadd after ondemand headers are processed

kinglozzer commented 3 years ago

I can’t reproduce this with the above steps 😅 even when I delete the assets/_tinymce directory to force it to regenerate. The x-include-js header includes /assets/_tinymce/tinymce-cms-de12f05075.js, and that loads correctly & the TinyMCE instance works as expected.

Chrome 88.0.4324.192 on MacOS by the way, perhaps it’s a browser issue?

lekoala commented 3 years ago

@kinglozzer how odd! this is what happens for me (i didn't try on a "fresh" project but i don't see why it would do that in my current project)

I can fix it by loading beforehand the combined file /assets/_tinymce/tinymce-cms-7a426e1942.js in a LeftAndMainExtension

    // This needs to be loaded after #assetadmin because it depends on InsertMediaModal to be defined
    $cmsConfig = HTMLEditorConfig::get('cms');
    $generator = Injector::inst()->get(TinyMCECombinedGenerator::class);
    Requirements::javascript($generator->getScriptURL($cmsConfig));

I can try on another project to see if I get the same error

lekoala commented 3 years ago

@kinglozzer ok if i simplify my code to just return the html editor field, it works... so i guess it's somewhere in my fields that there is something causing the issue. I haven't found so far but at least there is no need for you to check further. If I find why it's doing that i will update the issue.

lekoala commented 3 years ago

@kinglozzer ahah found it ! that was a nasty one

Let me update my bug report -:)

Do a fresh load on a ModelAdmin instance
Try to edit a record that contains an html editor field AND any field having a js requirements loaded from an external cdn => it won't load because it needs to load the tinymce config generated by TinyMCECombinedGenerator first (which is done through x-include-js

lekoala commented 3 years ago

You can try for instance a field needing

    Requirements::javascript("https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.js");

kinglozzer commented 3 years ago

Yep, that does trigger it! Thanks for investigating @lekoala

lekoala commented 3 years ago

@kinglozzer you are welcome!

and since i'm really curious, it seems the difference is that:

when you load a local script, it will be fetched through ajax
when it's from a cdn, it will be requested as a regular script (which i guess is blocking ?)

knowing that, in the meantime, either external ressources should be avoided, or tinymce loaded up front.

bumbus commented 3 years ago

Hi, I also experience this issue from time to in while editing pages.

silverstripe/recipe-cms": "4.7@stable
Chrome 88

kevinreynolds commented 3 years ago

I am also experiencing the same issue when I try to edit pages.

"silverstripe/admin": "^1.7"

lekoala commented 3 years ago

So I got it to work by loading early tinymce globally in the admin. I still get a really ugly FOUC with the icons being displayed unstyled, so it's better than the thing crashing but not ideal anyway.

kevinreynolds commented 3 years ago

@lekoala thanks for sharing your solution. For me, the problem was not having the right permission for public/assets directory.

jpbroadwater commented 2 years ago

Also have the same issue with SS 4.9.0

Can I ask @kevinreynolds what was the right permission to have on the public/assets directory? And @lekoala please could you give specific steps on how to get tinymce to load early globally in the admin?

Many thanks everyone

lekoala commented 2 years ago

@jpbroadwater you can do something along these lines in a LeftAndMain extension

https://github.com/lekoala/silverstripe-base/blob/842f0686f144f35649e04966f85f03431070e08b/src/Admin/BaseLeftAndMainExtension.php#L113-L120

jpbroadwater commented 2 years ago

Hi, thanks very much for replying. If I've understood you correctly, I need to use composer to require lekoala/silverstripe-base. But attempting that, with SS 4.9.0 results in "InvalidArgumentException - could not find a matching version of package lekoala/silverstripe-base". Can you advise on this.

And then assuming I can eventually install the base, does the specific code you mentioned automatically come with it?

lekoala commented 2 years ago

@jpbroadwater you don't have to install my module, you can simply create your own leftandmain extension and copy the specific lines i've mentionned

public static function forceTinyMCELoad()
{
    // This needs to be loaded after #assetadmin because it depends on InsertMediaModal to be defined
    $cmsConfig = HTMLEditorConfig::get('cms');
    $generator = Injector::inst()->get(TinyMCECombinedGenerator::class);
    $link = $generator->getScriptURL($cmsConfig);
    Requirements::javascript($link);
}

jpbroadwater commented 2 years ago

Thanks so much for being patient with me and I'm really excited at the prospect of getting this working, but I'm not very familiar with all this - could you give me another pointer?

So far within /app/src I've created a new file named tinymceExtension.php and the code is:

<?php

namespace {

    use SilverStripe\ORM\DataExtension;

    class tinymceExtension extends DataExtension 
    {

        public static function forceTinyMCELoad() {

            $cmsConfig = HTMLEditorConfig::get('cms');
            $generator = Injector::inst()->get(TinyMCECombinedGenerator::class);
            $link = $generator->getScriptURL($cmsConfig);
            Requirements::javascript($link);

        }

    }

}

and within /app/_config.php I've written:

// To add tinymce extension to all classes
SilverStripe\Security\Member::add_extension(tinymceExtension::class);

But it produces a server error. What am I doing wrong please?

lekoala commented 2 years ago

@jpbroadwater i'm sorry, but it seems you need to get more understanding of the inner mechanics of SilverStripe in order to apply the code yourself. Feel free to contact me directly if you need support on this issue.

jpbroadwater commented 2 years ago

Have emailed you just now, thanks

GuySartorelli commented 2 years ago

Any time I have custom scripts that require something like tinymce I just make sure my script is deferred. I imagine the same would work for CDN scripts.

ritesh845 commented 2 years ago

@lekoala

I have faced the same issue related to TinyMCE I didn't understand what I do? Can you please guide me

ritesh845 commented 2 years ago

@lekoala

lekoala commented 2 years ago

@ritesh845 the best way i've found so far is to load the editor upfront through a leftandmain extension. see my comment above

public static function forceTinyMCELoad()
{
    // This needs to be loaded after #assetadmin because it depends on InsertMediaModal to be defined
    $cmsConfig = HTMLEditorConfig::get('cms');
    $generator = Injector::inst()->get(TinyMCECombinedGenerator::class);
    $link = $generator->getScriptURL($cmsConfig);
    Requirements::javascript($link);
}

please note this is not a place for support, the goal here is to report (and hopefuly fix one day) the issue

chrispenny commented 1 year ago

Also present in 2.0.0-beta1.

ssmarco commented 1 year ago

In my case it is a warning message in yellow background not in red. Easy to replicate in Google Chrome by adjusting the connection speed in the Network tab to 3G and then clear any cache.

Open a page that does not use Elemental block for example, Page not found which shows the default Content field.
Check Console tab. See screenshot below

shafquatnz commented 1 year ago

How to reproduce in CWP/CMS 4.12 (clean install)

composer create-project silverstripe/recipe-ccl ./vanilla ^2
cd vanilla
composer require silverstripe/recipe-cms

Load up the blank site in Chrome incognito, log into the CMS as admin, edit the home page, apply some text formatting, hit save and publish. Browser console shows this JavaScript error.

@lekoala unfortunately your fix doesn't resolve the JavaScript error.

silverstripe / silverstripe-admin

tinymce not defined #996

Description

Steps to Reproduce

Solution