Category Archives: jQuery

How to make CKEditor load just like a frame but show upper command buttons when maximized to fullscreen

Here is my small take on what is needed in lots of apps that have limited real estate on the screen. To load some (in my case CKEditor) editor with hidden chrome, buttons that are either shared for several editors, or each editor has its own set, you name it. There are limitless possibilities of what your client would like to have/see/use.

My sample is loading CKEditor with hidden build in controls and using own buttons. Once in fullscreen the editor will fill the screen and we can also show controls.

Here is the sample repo :

https://github.com/rostacik/CKEditorPlayground

and here you can see directly the result :

https://rawgit.com/rostacik/CKEditorPlayground/master/CKEditorPlayground/index.html

Feel free to reuse, enjoy.

How to subscribe to document.ready event from multiple TypeScript files

What I needed :

I needed to subscribe from multiple TypeScript files to ready event of document, the usual event where you hook to do some initializations with jQuery, when you need it. There are more ways, to do this.

  • You can handle the ready event on the “host” page and do what you need to do there,
  • You can, if you know you are the only one just inject your anonymous function to say window.onload but there is a problem, that the last pointer wins and you can have only one function there, just try this in you page :
    <script>
             window.onload = function() {
                 console.log('1');
             };
             window.onload = function () {
                 console.log('2');
             };
    </script>
    

    There will be only one line in console, with 2.

  • Somehow subscribe to the ready event and call all pointers no matter who subscribed and will subscribe in the host page.

First of all there are some things to clarify :

How to do it :

Since TypeScript is in fact JavaScript (its superset of JavaScript), you can use it without TS (btw I don’t use any feature from TS, maybe we could change

$(document).ready(function () {
         console.log('ts 2');
});

to :

$(document).ready(() => {
         console.log('ts 1');
});

But whatever 🙂

The key is to :

  • use jQuery in your project,
  • use everywhere $(document).ready since it will subscribe your code to the jQuery ready event and essentially chain them it the order as browser parsed the .js files,
  • include jquery.d.ts definition for TypeScript to be happy (part from DefinitelyTyped project)

The snippet of subscription code can be placed after module and class definitions in each .ts file so you can do what you need. TypeScript will just copy this JS to the resulting .js file.

In case of any questions, something interesting, another take on the same problem > please share in comments, thank you.

Download link : sample app