External lib with Meteor – Medium Editor

External lib with Meteor – Medium Editor

Usually in a Meteor application all the client Javascript are loaded into the browser on the first page visit. This approach make extremely fast the navigation of any application. But when your app become big it can be a problem. Thinking about a blog application with a particular editor.

In a normal Meteor application all the Javascript for the editor functionality is loaded at begin for every pages of the blog also where it’s not required. We want to find a way to avoid this behaviour and let us decide on which page we want to load the library.

As example we will create a super simple blog post editor application with just one views where the user can write post ( no save or update supported on thsi tutorial ). As for the external library we will use the Medium clone editor. This library reproduce the exact behaviour of the popular social blogging platform Medium.

We will not load the library using the Meteor package system, instead we are going to use the standard bower application. Is a prerequisite for this tutorial to have both Meteor and Bower installed.

Setup the application

Let’s start by creating the application.

  • meteor create editor
  • meteor add iron:router
  • meteor add manuelschoebel:wait-on-lib
  • meteor add fontawesome:fontawesome

This in enough for the Meteor part as we want to maintain the application simple we didn’t load any CSS framework or account management package. Now it’s time to get our library we want to load dynamically only in the edit page of our blog. As said some line above we will use bower. Let’s create a public folder in our application directory and a bower.json file in the root. The content of the bower.json file at begin will be :


{
  "name" :"Editor",
  "directory": "/public/bower_components/",
  "analytics": false,
  "timeout": 120000
}


Once the file and the folder are in place you can download the needed library. In this case we are going to use the Medium Editor clone complete with the insert plugin ( this will install the plugin and all the dependency, including the Medium Editor)

bower install medium-editor-insert-plugin --save

The setup of the application is complete and we can start to code some.

The application

For this example we need just one template and some function to run when the page is rendered. Clear all the file created by Meteor default and create a client and a lib folder. In the lib folder we are going to copy all the Medium Editor needed CSS like show in the picture below.

External lib with Meteor – Medium Editor
External lib with Meteor – Medium Editor

In the client folder create two file called post.js , where we will put all the Javascript code for the editor and a post.html file where we will put the Template HTML code.


<template name="edit_post">
<h1>Edit the post</h1>
    <textarea class="editable">

    </textarea>
</template>



Template.edit_post.rendered= function(){
    editor = new MediumEditor('.editable', {});

    $('.editable').mediumInsert({
        editor: editor
    });
};


Last file needed is the routing.js where we specify the route of our application (just one in this case).


Router.route('/',{
    path:'/',
    template:'edit_post'
});


At this point all is in place but if your run the application is displayed about the editor.

This happen because we used the public folder to put the Medium Editor library and this folder is not taken by Meteor when it create the application. We have to load all this library in the route file.

Like said in the Github page, for the Meteor Editor Insert plugin we have to load some dependency files before the plugin. To accomplish this we can use a onBeforeAction in the route and wait step by step for the needed library.

Change the code in the routing.js file to the one listed below :


Router.route('/',{
    path:'/',
    template:'edit_post',
        onBeforeAction: function(){
            var A= IRLibLoader.load('/bower_components/jquery/dist/jquery.min.js');
            var B = IRLibLoader.load('/bower_components/medium-editor/dist/js/medium-editor.min.js');

            if(A.ready() &amp;&amp; B.ready()){
                var C = IRLibLoader.load('/bower_components/handlebars/handlebars.runtime.min.js');
                var D = IRLibLoader.load('/bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js');
                var E = IRLibLoader.load('/bower_components/blueimp-file-upload/js/jquery.iframe-transport.js');
                var F = IRLibLoader.load('/bower_components/jquery-sortable/source/js/jquery-sortable-min.js');

                if( D.ready() &amp;&amp; E.ready() &amp;&amp; C.ready() ) {
                    var G = IRLibLoader.load('/bower_components/blueimp-file-upload/js/jquery.fileupload.js');

                    if (G.ready()) {
                        var L = IRLibLoader.load('/bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js');
                        if(L.ready()){
                            this.next();
                        }
                    }
                }
            }
        }
    }
);


At this point all the needed library with it dependency are loaded and you can start using the Medium editor on your page.

Conclusion

In this short tutorial we have seen how to load external library from Medium, and how to do that only for some page. There is some improvement needed like putting also the CSS loading in the route specification, but at the moment IRLibLoader it’s not working with CSS file. We also didn’t implented any way to save the picture inserted in the editor but it’s out of the scope of this tutorial.

Cheerss! Happy Coding!

Adam Brown
Please follow and like us:

Leave a Comment