Improving TinyMCE Performance in Angular Application

I have installed tinyMCE in my angular app using the latest (xx) version of tinyMCe and the latest angular-ui / ui-tinymce ( https://github.com/angular-ui/ui-tinymce ). All code is minified.

In my application, I have multiple tinyMCE instances per page (up to three) and the application uses angular's routing engine.

Everything is set up correctly, the editors are working (and each of them has its own configuration).

The problem I'm currently facing is performance. Whenever I load a new page, tinyMCE instances recreate themselves, even if they are already there (= in the dom)! It takes some time (up to 3 seconds) to create the tinyMCE editor. The amount of text in it doesn't seem to matter much.

I tried using the tinyMCE gzip compressor but I couldn't get it to work.

What actions can I take to improve performance in my application?

If this is relevant at all: I'm using Java backend and AngularJs version 1.2.16

+3


source to share


1 answer


How to optimize TinyMCE initialization speed

(Want to see the original article ?)



Here are a few steps you need to take to improve your TinyMCE initialization / load times.

  • Use and install the TinyMCE compressor.
    This will bundle all JavaScript HTTP requests into one big request, and also gzip them by 75%.

  • Enable button_tile_map parameter (should be enabled by default).
    This results in icons loading faster as multiple image requests are replaced with multiple tilemap requests.

  • Compress other scripts using the custom scripts option inside the compressor.
    There may be other third party scripts on the same page. They can also be added to the compressor.

  • Disable plugins you don't need.
    Don't forget to remove them from tinyMCE.init and tinyMCE_GZ.init calls.

There is currently no compressor for TinyMCE 4 for the Java backend, unfortunately. And as you said, all the code is minified . The only advice I can give is to remove unused plugins and reduce the number of requests by merging multiple JS files into as many files as possible.

0


source







All Articles