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.