Lazy loading fails

[iJungleboy]

I have a fairly complex plugin for a CMS called DNN, our plugin is called 2sxc - here on github. It's a generic data model/editing content-management component and uses angular-formly to create generic forms.

Since it's generic, it's also important that scripts are loaded as needed, otherwise the edit-ui becomes much too large with google-maps scripts, wysiwyg-scripts etc. when the user only needed three input fields.

We're using OC Lazyload to lazy-load scripts as needed. Using tinymce and ui-tinymce this fails. I haven't been able to find the exact issues yet, but I do see that https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js#L17-L19 shows a classic "get out of the code if I can't find tinymce" which is probably part of the problem.

Has anybody managed to lazy-load this properly?

[iJungleboy]

I got a solution to work - not perfect yet so I'll see if I can improve, but I'll share my current working solution:

HTML:

        <lazy-load-tinymce>
            <div lazy-ui-tinymce="tinymceOptions" lazy-ng-model="value.Value" class="field-string-wysiwyg-mce-box"></div>
        </lazy-load-tinymce>

Javascript directive

        .directive('lazyLoadTinymce', function ($compile) {
            return {
                restrict: 'E',
                controller: function ($scope, $element, $interval, $window) {
                    var checkIfTinyMceLoaded = $interval(function() {
                        if (!$window.tinymce) return;
                            $interval.cancel(checkIfTinyMceLoaded);
                            var orig = $element[0].innerHTML.replace(/lazy-/g, "");
                            var el = $compile(orig)($scope);
                            $element.replaceWith(el);
                    }, 10);
                }
            };
        })

[deeg]

I have not yet tried to lazy load this plugin myself.

Could you post a plunker reproducing the problem you are having, and maybe one with the temporary fix so we can look into it more.

I'm happy to get some code in to allow for lazy loading as long as we do not lose anything such as performance or features. Feel free to open a PR following the contribution guidelines if you have a fix ready.

[iJungleboy]

I basically got it to work without changing ui-tinymce.

So for anybody else: lazy loading using OC Lazy Load works well - it's just that in general lazy loading is fairly tricky. For example, your module which needs the ui-tinymce cannot have it in the dependencies - so you can't

angular.module("mymod", ["ui-tinymce"]

because then it already fails before lazy loading ui-tinymce.

And if you do include ui-tinymce and only want to lazy-load the tinymce-scripts, use my solution above.

And if someone wants to change ui-tinymce to survive lazy-loading of tiny-mce by implementing something like a retry-timer to see if ui-tinymce arrived, that of course would be a valuable add on :).

[anishkvirani]

Hi @iJungleboy,

I tried to use your code for lazy loading of inline tinymce but that doesn't seem to work now. May be the version of tinyMce and ui-tinyMce have changed. I am using inline tinyMce in a dynamic page builder app where we can have 100-200 inline editors which is making the builder app slow to load.

@deeg, have you added the lazy loading feature in the current version?

Any help is appreciated. Thanks in advance.

[iJungleboy]

Yes, we have it working as needed. The main form doesn't know anything about tinymce, only if it's included in one of the components does lazy-loading kick in.