Skip to main content

Template.blog.onRendered(function(){
$('#editor1').trumbowyg(
{
btnsDef: {
        // Create a new dropdown
        image: {
            dropdown: ['insertImage', 'upload'],
            ico: 'insertImage'
        }
    },
    // Redefine the button pane
    btns: [
        ['viewHTML'],
        ['formatting'],
        ['strong', 'em', 'del'],
        ['superscript', 'subscript'],
        //['link'],
        ['insertImage'],
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
        ['unorderedList', 'orderedList'],
        ['horizontalRule'],
        ['removeformat'],
        ['fullscreen']
    ],
    plugins: {
        // Add imagur parameters to upload plugin for demo purposes
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID xxxxxxxxxxxx'
            },
            urlPropertyName: 'data.link'
        }
    }
});
setTimeout(function(){
// <h2>Big monster&nbsp;</h2><p>Kosova long crowing rooster test.</p>/
$('#test').val('test');
},1000);
});
Template.blog.events({
'click #button':function(e){
e.preventDefault();
    // var editor1= $('#test').val();
    // $('#editor1').val(editor1);
    var x ='<div> <div style="text-align:center;margin-left: 40%"> <img id="Ankit" src="https:static.pexels.com/photos/248797/pexels-photo-248797.jpeg" alt="" style="height:100%;width:10%;"></div></div><br><br><p>sdfkldsmdslf;kmsdf</p>';
         $('#editor1').trumbowyg('html',x);

},'click #Ankit':function(e){

// var v = doGetCaretPosition($('#editor1'));
// alert(v);
 },
'click #button1':function(e){
e.preventDefault();
   /* var x ='<div> <div style="text-align:center;margin-left: 40%"> <img id="Ankit" src="https:static.pexels.com/photos/248797/pexels-photo-248797.jpeg" alt="" style="height:100%;width:10%;"></div></div><br><br><p>sdfkldsmdslf;kmsdf</p>';
    x=x+x;
 $('#editor1').trumbowyg('html',x);*/
// var cursorPosition = $('#editor1').prop("selectionStart");
// alert(cursorPosition);
// $('#editor1').trumbowyg('append', 'sometext');


  // var cursorPosition = getCurrentCursorPosition($('#editor1'));
  //  alert(cursorPosition);
  //  var editor  = $('#editor1').val();
  //  alert(editor.length+  " Total length");
  //  var lower = editor.substr(0,cursorPosition);
  //  var upper = editor.substr(lower.length,editor.length);
  //  alert(lower);
  //  alert(upper);
 $('#editor1').trumbowyg('restoreRange');

    // Insert text at the current position
    $('#editor1').trumbowyg('execCmd', {
        cmd: 'insertText',
        param: 'Anki',
        forceCss: false
    });


 },
'click .trumbowyg-insertImage-button ': function(){
// alert('cool');
$('#upload_profile').click();
$('.trumbowyg-fixed-top').hide();
},

  'change #upload_profile': function(e, template) {
  $('.trumbowyg-fixed-top').hide();
   var editor= $('#editor1').val();
    // var cursorPosition = $('#editor1').prop("selectionStart");
   //  var cursorPosition = getCurrentCursorPosition($('#editor1'));
   // alert(cursorPosition);
   // alert(editor.length+  " Total length");

   // var lower = editor.substr(0,cursorPosition);
   // var upper = editor.substr(lower.length,editor.length);
   // alert(lower);
   // alert(upper);
   // Session.set("lower",lower)
   //  Session.set("upper",upper);
    upload_profile_pic(e, template);

},
});




function upload_profile_pic(e,template){
    // e.preventDefault();
    // var files = e.currentTarget.files;
    if (e.currentTarget.files && e.currentTarget.files[0]) {
     var file = e.currentTarget.files[0];
      if (file) {
 
        var reader = new FileReader();
   var base64data="";
   reader.readAsDataURL(file);
   reader.onload = function () {
   console.log(reader.result);
   base64data = reader.result;

 var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://www.vayuz.com/testing/image_upload.php",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded"
  },
  "data": {
    "image": base64data,
  }
}
var imagePath = base64data;
 $.ajax(settings).done(function (response) {
  console.log(response);
  alert(response);
  var imagePath = 'https://www.vayuz.com/testing' + response.substr(1, response.length);
  console.log(imagePath);
  Session.setPersistent("new_profile_image_url",imagePath);
   Meteor.call("upload_profile_image","a",imagePath,function(error,result){
        if(error){
          alert("Error");
        }else{
        //var data = Session.get("lower") + '<img id="Ankit" src="'+imagePath+ '" alt="" style="height:100%;width:10%;">' +Session.get("upper");
        $('#editor1').trumbowyg('restoreRange');

    // Insert text at the current position
    $('#editor1').trumbowyg('execCmd', {
        cmd: 'insertText',
        param: '<img id="Ankit" src="'+imagePath+ '" alt="" style="height:100%;width:10%;">',
        forceCss: false
    });

    $('#editor1').trumbowyg('html',data);
            alert("Profile Pic Changed");
             // toastr.success(Sucess, Profile Pic Changed);
         }
       
    });

    //var imagePath = Session.get("new_image_url");

});
}
 }
}
}


   /*
   **  Returns the caret (cursor) position of the specified text field.
   **  Return value range is 0-oField.length.
   */
   /*function doGetCaretPosition (oField) {

     // Initialize
     var iCaretPos = 0;

     // IE Support
     if (document.selection) {

       // Set focus on the element
       oField.focus ();
 
       // To get cursor position, get empty selection range
       var oSel = document.selection.createRange ();
 
       // Move selection start to 0 position
       oSel.moveStart ('character', -oField.value.length);
 
       // The caret position is selection length
       iCaretPos = oSel.text.length;
     }

     // Firefox support
     else if (oField.selectionStart || oField.selectionStart == '0')
       iCaretPos = oField.selectionStart;

     // Return results
     return (iCaretPos);
   }

*/
   /*
   **  Sets the caret (cursor) position of the specified text field.
   **  Valid positions are 0-oField.length.
   */
/*   function doSetCaretPosition (oField, iCaretPos) {

     // IE Support
     if (document.selection) {

       // Set focus on the element
       oField.focus ();
 
       // Create empty selection range
       var oSel = document.selection.createRange ();
 
       // Move selection start and end to 0 position
       oSel.moveStart ('character', -oField.value.length);
 
       // Move selection start and end to desired position
       oSel.moveStart ('character', iCaretPos);
       oSel.moveEnd ('character', 0);
       oSel.select ();
     }

     // Firefox support
     else if (oField.selectionStart || oField.selectionStart == '0') {
       oField.selectionStart = iCaretPos;
       oField.selectionEnd = iCaretPos;
       oField.focus ();
     }
   }
*/

function isChildOf(node, parentId) {
    while (node !== null) {
        if (node.id === parentId) {
            return true;
        }
        node = node.parentNode;
    }

    return false;
};

function getCurrentCursorPosition(parentId) {
    var selection = window.getSelection(),
        charCount = -1,
        node;

    if (selection.focusNode) {
        if (isChildOf(selection.focusNode, parentId)) {
            node = selection.focusNode;
            charCount = selection.focusOffset;

            while (node) {
                if (node.id === parentId) {
                    break;
                }

                if (node.previousSibling) {
                    node = node.previousSibling;
                    charCount += node.textContent.length;
                } else {
                     node = node.parentNode;
                     if (node === null) {
                         break
                     }
                }
           }
      }
   }

    return charCount;
};





































<template name="blog">
  <head>
  <title>Blog</title>
</head>
<div>
</div>

<div>
  <textarea id="editor1" ></textarea>
</div>
    <input type="file" id="upload_profile" accept="image/*" style="display:none;"/>
    <button id="button"> Ankit</button> 

<button id="button1"> Ankit1</button> 
</template>

Comments

Post a Comment

Popular posts from this blog

Meteor JS REST API

WRITE A POST Shahid Shaikh FOLLOW Engineer, Blogger from Mumbai. RESTful CRUD Operations in Meteor.js Published Dec 31, 2015 Last updated Jan 19, 2017 Introduction Meteor is a popular framework for building real-time web applications. We have already covered a tutorial which explains  how to build chat system using Meteor.js . In this tutorial, we will learn how to develop a RESTful API using Meteor which perform CRUD operations. Creating new project Create a new meteor project using the following command: meteor create appName Choose an application name of your choice. Once Meteor is done creating the project, you will see the directories and files created by Meteor in the folder name. We will not need them as of now, so we will delete all of those files and create whatever we need in the coming section. Installing iron-router In order to perform routing in Meteor, we will use  this awesome...
1 comment
Read more

SSL No 2

Hom Let’s Encrypt SSL, Nginx, MUP → Deployment (Meteor) Nginx used for SSL setup Let’s Encrypt free SSL certificate: Use the instructions on this page to use OpenSSL to create your certificate signing request (CSR) and then to install your  SSL  certificate on your  Nginx  server. Restart Note: After you've installed your  SSL /TLS certificate and configured the server to use it, you must restart your  Nginx  instance. Let’s start by generating Add a A Record in your domain’s DNS Settings Setting up Let’s Encrypt ssh into your server console and run following commands $ wget https://dl.eff.org/certbot-auto $ chmod a+x certbot-auto $ ./certbot-auto certonly -d yourdomain.com --standalone After successful execution of the last command you can see your Certificate & Key generated in /etc/letsencrypt/yourdomain.com Setting up Nginx Let’s install nginx which ...
Post a Comment
Read more