How to add image from computer in Trumbowyg editor


#1

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
Main.html

<head>
  <title>summernote-meteor-example</title>
  <link rel="stylesheet" href="./../node_modules/trumbowyg/dist/ui/trumbowyg.css">
</head>

<body>
  <h1>Welcome to Meteor </h1>

  {{> editor}}

<!-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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>


</body>

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




Main.js

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

import './main.html';

  Template.editor.rendered = function () {
   $('.editors').trumbowyg({
            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']
        });
                         
};
   Template.editor.events({
   'click #select_text':function(){
	var data= $('#textarea').val();
   	alert(data);
   }
   });

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