halifaxious 6 years ago edited

I've been importing TinyMCE for all my forms and it works fine. But it's large so I thought I'd import it asynchronously instead. My async call is downloading the code and it's running something (because my textboxes disappear). But TinyMCE is no longer working. I think I'm calling it incorrectly. No matter what variation of tinyMCE + default that I try I get 'xxx is not a function'. Here is my code. I appreciate any guidance you can offer.

components/inittinymce.js
`
import $ from 'jquery';

import tinymce from 'tinymce';

import 'tinymce/themes/silver';
import 'tinymce-i18n/langs5/en_CA';
import 'tinymce-i18n/langs5/fr_FR';
import 'tinymce/plugins/lists';
//lots of plugins...
import 'tinymce/plugins/paste';

const mcelang = $('html').attr('lang') == 'en' ? 'en_CA': 'fr_FR';

//init tinymce object
tinymce.init({
selector: 'textarea.tinymce',
menubar: false,
plugins: [

'advlist autolink lists link image charmap ',
'searchreplace visualblocks',
'insertdatetime table paste'

],
toolbar: 'undo redo searchreplace paste | styleselect | bold italic charmap| alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image insertdatetime table ',
contextmenu: "link image imagetools table spellchecker",
language: mcelang

});

export default tinymce;
`

form.js entrypoint with async import of TinyMCE
`
import $ from 'jquery';
import '../../public/bundles/acrdutility/js/collection';
// import './components/inittinymce'; // removed in favour of async call

if($('textarea.tinymce').length>0){
import('./components/inittinymce').then((tinymce) => { tinymce.default.tinymce();}); //all variations of function name throw "no such function error"
}
`

| Reply |

Victor SFCASTS halifaxious 6 years ago edited

Hey halifaxious,

As a workaround, I think you can add an additional check in PHP or in your template and selectively include or not the TimeMCE. But what about your problem, not sure exactly. I'd recommend you to look into issues in their official github repo, probably someone already asked about it and know the solution. So, it works when you always load it? I mean, when your code is:


import $ from 'jquery';
import '../../public/bundles/acrdutility/js/collection'; 
import tinymce from './components/inittinymce'; // removed in favour of async call

tinymce();

If so, then inside your if statement the code should be like this:


if($('textarea.tinymce').length>0) {
    import('./components/inittinymce').then((tinymce) => {
        tinymce.default();
    }); //all variations of function name throw "no such function error"
}

i.e. instead of "tinymce.default.tinymce();" you need just "tinymce.default();". Or do you have a different working code when you TinyMCE in all cases? Then, what if you dump the "tinymce" variable in that then() callback? Something like this


if($('textarea.tinymce').length>0) {
    import('./components/inittinymce').then((tinymce) => {
        console.log(tinymce);

        tinymce.default.tinymce();
    }); //all variations of function name throw "no such function error"
}

What do you see in Console tab?

Also, I'd recommend you to wait until the page is loaded, i.e. do it inside of "$(document).ready()":


import $ from 'jquery';
import '../../public/bundles/acrdutility/js/collection'; 
// import './components/inittinymce'; // removed in favour of async call

$(document).ready(function() {
    if($('textarea.tinymce').length>0){
        import('./components/inittinymce').then((tinymce) => { tinymce.default.tinymce();}); //all variations of function name throw "no such function error"
    }
});

I hope this helps!

Cheers!

| Reply |

halifaxious Victor 6 years ago

Thanks Victor. I've fixed my code so that I call the correct function. But TinyMCE is still not initializing properly-- I get an invisible widget. I've submitted a bug report here, https://github.com/tinymce/.... It includes all my current code so hopefully the tinyMCE people will know what's going on. There didn't appear to be any other similar issues posted.

| Reply |

Victor SFCASTS halifaxious 6 years ago edited

Hey halifaxious ,

Good idea, thanks for the link to your issue, it might be helpful for other users.

Cheers!

| Reply |