How to add image from computer in Trumbowyg editor


Hi Everyone,

I am creating a blog editor and I am using Trumbowyg editor to serve this purpose. It’s lightweight and compatible with meteor also. There is also an option for adding images from URL in the heading section, But I want to give upload image option to the user for uploading an image from computer. I checked on this library’s Trumbowyg

Here is the code, I am using for creating the blog editor

  <link rel="stylesheet" href="./../node_modules/trumbowyg/dist/ui/trumbowyg.css">

  <h1>Welcome to Meteor </h1>

  {{> editor}}

<!-- Import jQuery -->
<script src="//"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<!-- Import Trumbowyg -->
<script src="./../node_modules/trumbowyg/dist/trumbowyg.js"></script>
<!-- Import all plugin you want AFTER importing jQuery and Trumbowyg -->
<script src="./../node_modules/trumbowyg/dist/plugins/base64/trumbowyg.base64.js"></script>


<template name="editor">
    <textarea class="editors"></textarea>
    <button id="select_text"> Select</button>


import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

  Template.editor.rendered = function () {
            autogrow: true,
            fullscreenable: false,
            btnsDef: {
                // Customizables dropdowns
                image: {
                    dropdown: ['insertImage', 'upload', 'base64'],
                    ico: 'insertImage'
            btns: ['viewHTML',
                '|', 'formatting',
                '|', 'btnGrp-design',
                '|', 'link',
                '|', 'image',
                '|', 'btnGrp-justify',
                '|', 'btnGrp-lists',
                '|', 'horizontalRule']
   'click #select_text':function(){
	var data= $('#textarea').val();

I have added the 4 scripts in the main.html.
Please check the attached image, as I want that as my final result.