TinyMCE (WYSIWYG) doesn't work in admin when JS minify is enabled

[jordy2607]

Preconditions

1. Magento 2.1.9 production mode

Steps to reproduce

1. Enable js minify in Stores->Advanced->Developer
2. Deploy static content
3. Open an admin page with a textarea with TinyMCE editor enabled. For example a product edit page and open the content tab for the TinyMCE to load.

Expected result

1. TinyMCE is loaded succesfully

Actual result

1. TinyMCE is trying to load its dependencies but the url from which it is trying to retrieve these dependencies is incorrect. Which causes TinyMCE failing to load.
2. Expected url: /static/adminhtml/Magento/backend/en_US/tiny_mce/plugins/inlinepopups/editor_plugin_src.js
3. Actual url: /storemanager/catalog/product/edit/id/324/key/fbd61981481baeb3aa25d2fbae2c1fc6e715ab6ea8806793343d4343f79fa0fd//plugins/inlinepopups/editor_plugin.js

[magento-engcom-team]

@jordy2607 We cannot reproduce this issue as described. Please add more details to your description of the steps you followed when identifying this issue. Screenshots or logs would be helpful, too.

[piotrkwiecinski]

I have similar problem on 2.1.7. Requirement is to have production mode and minification enabled. For me it happens when I have 2 plugins enabled Dotmailer and Adyen Payment.

I'm trying to narrow it down, but it takes a while due to need to redeploy static content.

[fjmrf]

We have the same issue on a client's installation. Magento 2.1.7, production mode and minification enabled. We deactivated the minification and worked, so the issue is when minified. We still don't have a fix. One more detail, the server set up seems to have influence on it: the issue happens on the production server but not on the stage server. Attached a video of the issue.
2017-11-02_15-07-01.mp4.zip

[ghost]

I have the same issue with two different Magento 2.2.0 sites.

Issue only seems to occur when the Minify JavaScript Files option is enabled.

Example of an incorrect path;
/admin/catalog/product/edit/id/41056/key/1ae172c797df98a63ac5f4de3dbfcfef776d78ef715de001002671cc43026641//plugins/paste/editor_plugin.js

[mipsvikas]

This is the problem due to after turn on JS minify option the static file path is incorrect as well as all plugn js are minimize in .min.js form but in script name it not with .min version.

I have fixed issue by modify in lib/web/tiny_mce/tiny_mce_src.js

1-Find code near line 10833
tinymce.documentBaseURL = window.location.href.replace(/[\?#].*$/, '').replace(/[\/\\][^\/]+$/, '');
if (!/[\/\\]$/.test(tinymce.documentBaseURL))
tinymce.documentBaseURL += '/';

Replace with
tinymce.documentBaseURL = ADMIN_BASE_URL+"/tiny_mce";
tinymce.baseURL = ADMIN_BASE_URL+"/tiny_mce";
if(IS_MINIFY == 1) tinymce.suffix = '.min'; else tinymce.suffix = '';

2- Find code near line 11391
sl.add(tinymce.baseURL + '/langs/' + s.language + '.js');
Replace with
sl.add(tinymce.baseURL + '/langs/' + s.language + tinymce.suffix + '.js');
3- Find code near line 10758
tinymce.ScriptLoader.add(this.urls[n] + '/langs/' + s.language + '.js');
Replace with
tinymce.ScriptLoader.add(this.urls[n] + '/langs/' + s.language + tinymce.suffix + '.js');

Change code in bellow file or override in admin theme:
vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml

4- Find code:

<script>
var BASE_URL = '<?php /* @escapeNotVerified */ echo $block->getUrl('*') ?>';
var FORM_KEY = '<?php /* @escapeNotVerified */ echo $block->getFormKey() ?>';
var require = {
"baseUrl": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('/') ?>"
};
</script>
`
Replace code with:

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$scopeConfig = $objectManager->create('Magento\Framework\App\Config\ScopeConfigInterface');
$isMinify = $scopeConfig->getValue('dev/js/minify_files', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
?>
<script>
var BASE_URL = '<?php /* @escapeNotVerified */ echo $block->getUrl('*') ?>';
var FORM_KEY = '<?php /* @escapeNotVerified */ echo $block->getFormKey() ?>';
var ADMIN_BASE_URL = '<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('/') ?>';
var IS_MINIFY = '<?php /* @escapeNotVerified */ echo $isMinify ?>';
var require = {
"baseUrl": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('/') ?>"
};
</script>

5- Run commands
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploye

Now working fine

[johnpark-mosquitodigital]

When will this be fixed in the core and rolled out to 2.2 branch?

[maqlec]

@mipsvikas this problem isn't about loading wrong files in javascript. Tiny_mce library should be excluded from minification but it is not. On 2.1.7 version it worked well but in 2.1.10 is broken.

[maqlec]

Ok, I know where exactly problem is. You have to use extension which overrides dev/js/minify_exclude setting (it should have "/tiny_mce/" value which prevents this library from minification). In my case it was MSP_ReCaptcha extension.

Maybe values from this setting should be merged instead of override by modules.

[JuteSenthil]

@mipsvikas : Thanks you so much. It's work perfect as expect. Thanks once again.

[maqlec]

@JuteSenthil it's illusion, it's not working like a charm. Only on the first look but try to add image or link in editor and you shouldn't see modal content because links without .min are hardcored in tiny_mce templates

[mipsvikas]

@JuteSenthil Welcome

[mipsvikas]

@maqlec Its not due to any extension override. I had found issue into freshly installed magento. Might be it already resolved in the latest version.

[jordy2607]

i can confirm the findings from @maqlec . In our case we are also using the MSP_ReCaptcha module. After disabling the minify_exclude config in this module the wysiwyg editor is working again when minification is enabled.

The only other Magento module which adds this config is the Module_Store, which adds /tinymce/ to the minify_exclude list.

Apparently these configs aren't merged in Magento 2.1. Workaround for me for now is to combine these settings in one of our own modules, which is specific for this magento installation.

<dev>
	<js>
		<minify_exclude>
			google.com
			gstatic.com
			/tiny_mce/
		</minify_exclude>
	</js>
</dev>

[Anantkprajapati]

Hello Guys,

May be this code will help you.

I am facing same issue but i did use CloudFlare and i disabled the Rocket Loader (speed > Rocket Loader )

but below code will help you with enable minified js also.

`require(['jquery','tiny_mce/tiny_mce_src'], function($){
$( document ).ready(function(){
tinyMCE.init({
mode : "exact",
elements: "history_comment", // id of textarea
theme : "advanced",
plugins : "",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
theme_advanced_resize_horizontal : 'true',
theme_advanced_resizing : 'true',
apply_source_formatting : 'true',
convert_urls : 'false',
force_br_newlines : 'true',
doctype : '',
setup : function(ed) {
ed.onChange.add(function(ed, evt) {
//ed.selection.select(evt.target);
$('#history_comment').text(tinyMCE.activeEditor.getContent());
});
}
}); // close tinyMCE

}); // close jquery ready

}); // close require
</script>

<script language="javascript" type="text/javascript" src="getBaseUrl() ?>static/adminhtml/Magento/backend/en_US/tiny_mce/tiny_mce.js"></script>`

[hostep]

As a couple of people here mentioned, this bug is caused by the fact that the value of the configurations dev/css/minify_exclude and dev/js/minify_exclude isn't being merged between different modules, the module which appears last in the app/etc/config.php file with a configuration value for this setting wins.

So for people having this problem, a fix is to add a new module which depends on all the other modules which define that setting, and then define your own configuration for that setting with all the regexes which should match from the other modules, including /tiny_mce/, and it should work.

@magento-engcom-team: I see you added the Fixed in 2.3.x label in here, would be great if you can tell us the specific commit which fixes this, thanks!

[magento-engcom-team]

Hi @jordy2607. Thank you for your report.
The issue has been fixed in #13687 by @hostep in 2.3-develop branch
Related commit(s):

• d1f1252ccbb8d1dc132e9596f30a2acb8994d35f

The fix will be available with the upcoming 2.3.0 release.

[duffner]

@magento-engcom-team, will this be backported to 2.2.x versions?

Separately, if anyone has created a patch to correct for this issue in 2.2.4 that would be awesome as well!

Thanks

Robert

[hostep]

@duffner: the "fix" mentioned above isn't really backwards compatible, it would potentially break existing Magento 2.2 or 2.1 installations I think.

Anyway, if you have this issue currently, try to search in etc/config.xml files from your customised code (your own, or 3rd party) for a section <minify_exclude>.
If it's your own code, try removing that part and use something like this instead, which is a much more stable solution.
If it's a 3rd party, try contacting them and point them to the same stackexchange answer and tell them the solution with <minify_exclude> isn't working properly in Magento 2.1/2.2 since it can conflict with other modules which try to do the same because the config value isn't being merged but overwritten.
The stackexchange answer will merge the config value, and the fix mentioned above will also do this, but is not really backwards compatible with 2.1/2.2

Hope this helps :)

[duffner]

@hostep, You're my hero! Thank you for being the first educated/helpful response I've ever received on the Magento issue tracker! If I could nominate what a helpful response looks like for the rest of the community this would be it!

Thank you for educating me as to why, and pointing out risks!

Have a great day!

[duffner]

@hostep, I am struggling with one thing from the link you sent?

$result[] = 'Vendor_Module/js/your-js-filename'; What would this path be for the core wysiwyg file that causes this bug?

[hostep]

Hi @duffner

Ah sorry, my explanation wasn't clear enough I think. Let me try again.

So the issue here is that Magento defines by default a regular expression which matches paths to js & css assets: /tiny_mce/. These assets which match will not get minified. This is done over here: https://github.com/magento/magento2/blob/2fb5735/app/code/Magento/Store/etc/config.xml#L23-L31

My guess is that you and others are running into problems because a custom module also defines such a regex which then overrides the default value of /tiny_mce/.
One way to solve it is for the custom module to define two regular expressions which can match assets for marking them to not minify those assets, for example:

<minify_exclude>
    /tiny_mce/
    /another-regex-which-matches-my-custom-css-or-js-file(s)/
</minify_exclude>

In your case, I think the first regex of /tiny_mce/ will be missing in your custom module.

This is one way of making it work. But using this solution isn't very good because suppose there are 2 custom modules who do something like this. Those modules don't know that another module does the same, so they overwrite each others regexes and will potentially cause problems.

The better way to solve it is to use that stackexchange answer, where the custom module instead of defining the regex in the config.xml file, defines the same regex but then in that plugin. In this case, it won't overwrite the default defined regex of /tiny_mce/, but appends it.

You can find an example of a custom module where this got fixed over here. You'll see that the regex has been moved from the config.xml file to the Plugin. (please don't just copy paste all that code, because you don't need it all, you can for example ignore the isCssminLibraryOlderThanVersion3 method which is being used there).

Hope this makes the problem more clear.

[SamB-GB]

I'm on 2.2.4 and disabling the Klarna module seems to have resolved the issue for me

[hostep]

@SamB-GB: nice find! You are right, since the Klarna module comes bundled by default in Magento 2.2.4 now and contains the following code which causes the problem in its config.xml file:

        <dev>
            <js>
                <minify_exclude>
                    klarnacdn.net
                </minify_exclude>
            </js>
        </dev>

So they do it incorrectly.

Now, if we would be able to find where that code is hosted on Github, we could send in a PR to fix it, but I can't seem to find it anywhere...

[duffner]

@hostep, I added this find to the stack exchange link you referenced but forgot to added it back here! Thanks for reporing @SamB-GB

[LSERRE]

Just update Klarna module with composer and its seems they have fixed the issue.

This block has been removed.

    <dev>
        <js>
            <minify_exclude>
                klarnacdn.net
            </minify_exclude>
        </js>
    </dev>

Can anyone confirm please?

[hostep]

So, let's close this issue which has been open for a long time and was always caused by 3rd party modules (one which was included by default in Magento).

If people still run into this again, read through the thread, there are a lot of solutions suggested in here and I believe the explanation is clear enough to point you in the correct direction of finding the cause of the issue.

Summary for module creators who want to exclude some css or js file(s) from minifying:

• Using Magento 2.1 or 2.2: https://magento.stackexchange.com/questions/162624/exclude-custommodule-js-from-minification-of-js-in-magento2/198480#198480
• Using Magento 2.3 or higher, see Change the way the minify_exclude configurations can be used. #13687 which allows you to do something like the following which merges the regexes instead of overwriting them (which was 2.1 & 2.2 behaviour):

<config>
    <default>
        <dev>
            <js>
                <minify_exclude>
                    <unique_key_one>/regex1/</unique_key_one>
                    <unique_key_two>/regex2/</unique_key_two>
                </minify_exclude>
            </js>
        </dev>
    </default>
</config>

If someone disagrees with me closing this, let me know.

[AppSimone]

If someone is looking for a quick fix I've added into .htaccess file these rewrite urls and it's working

RewriteRule ^[admin]/(.)/key/(.)/plugins/(.*)$ /pub/static/adminhtml/Magento/backend/en_US/tiny_mce/plugins/$3 [R=302,NC,L]

RewriteRule ^[admin]/(.)/key/(.)/langs/(.*)$ /pub/static/adminhtml/Magento/backend/en_US/tiny_mce/langs/$3 [R=302,NC,L]

RewriteRule ^[admin]/(.)/key/(.)/themes/advanced/(.*)$ /pub/static/adminhtml/Magento/backend/en_US/tiny_mce/themes/advanced/$3 [R=302,NC,L]

It works without patches.

The rewrite condition can be done better looking for urls like ^[admin]/(.)/key/(.)//plugins/(.*)$ (note the double slash) using RewriteCond as rewriterule removes the double slashes... but I was in an hurry :)

Note: [admin] is the admin secret folder
Note2: you probably need to copy lib/web/tiny_mce folder to /pub/static/adminhtml/Magento/backend/en_US/tiny_mce as some files are missing due to the minimize issue.

[AndyJAllen]

So, let's close this issue which has been open for a long time and was always caused by 3rd party modules (one which was included by default in Magento).

If people still run into this again, read through the thread, there are a lot of solutions suggested in here and I believe the explanation is clear enough to point you in the correct direction of finding the cause of the issue.

Summary for module creators who want to exclude some css or js file(s) from minifying:

* Using Magento 2.1 or 2.2: https://magento.stackexchange.com/questions/162624/exclude-custommodule-js-from-minification-of-js-in-magento2/198480#198480

* Using Magento 2.3 or higher, see #13687 which allows you to do something like the following which merges the regexes instead of overwriting them (which was 2.1 & 2.2 behaviour):

<config>
    <default>
        <dev>
            <js>
                <minify_exclude>
                    <unique_key_one>/regex1/</unique_key_one>
                    <unique_key_two>/regex2/</unique_key_two>
                </minify_exclude>
            </js>
        </dev>
    </default>
</config>

If someone disagrees with me closing this, let me know.

On M2.2 the proposed solution doesn't work with offsite javascript files that are being required into requirejs. I found my way here after js minification was breaking links to offsite .js files...i then added the core_config_data setting dev/js/minify_exclude to exclude the url address.... that fixed my 3rd party module, however, the addition of the exclude setting then broke the tiny_mce on the back end which broke the WSIWYG editor from showing.

[hostep]

@AndyJAllen: exactly, that's why I reworked how to use the exclusion in Magento 2.3, so the exclusion of one module doesn't overwrite the one from another module.
Have you figured out a solution already? Following https://magento.stackexchange.com/a/198480 is currently the best solution for Magento 2.2

[sumeetmobiwebtech]

i am using magento 2.3
i disable all modules of klarna -
Klarna_Core
Klarna_Kp
Klarna_Ordermanagement

Still getting error in admin cms block -
1 - Failed to load resource: the server responded with a status of 404 (Not Found)
2 - require.js:141 Uncaught Error: Script error for: tinymce
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:166)
at HTMLScriptElement.onScriptError (require.js:1681)

Please anyone there how guide me step by step ?

[hugoruivo]

@sumeetmobiwebtech I was having the same issue with my Magento 2.3 setup.

For me the problem was in a third party module that was using the "old" tinymce.

Search for text 'tinymce' in your app/code directory. If you find some references in third party modules try to check if they have updates for Magento 2.3.

Version 2.3 do not use tinymce anymore so somewhere in your setup you still use tinymce so you get this problem because Magento can't find / define tinymce.

The right way in magento 2.3.1 for use tinymce

define(['wysiwygAdapter'], function(wysiwyg){
    // Your code here
});

[sumeetmobiwebtech]

@hugoruivo
Thank you so much for your reply.I did it already.And yes you are right in custom module define tinymce,i remove tinymce and the problem is gone.

[sjayjay005]

If you're using magento 2.3.*

composer require pavelleonidov/module-tinymce4
php bin/magento setup:upgrade && php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

[anil90]

hi @sjayjay005

i have upgraded to magento 2.3.2, facing same issue in WYSWYG related to tinyMCE js
https://www.dropbox.com/s/4h3odmbdb4dz1sz/Screenshot%202019-11-25%2016.31.58.png?dl=0

does this module fix this error.
Uncaught Error: Script error for: tinymce

[mobmoss]

I have the same issue with Magento 2.3.3 enterprise, and none engineers at adobe is able to help me with a premium support (cloud). Thank you adobe !