JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="col-sm-4">
  <div name="anotherdiv">
    <input type="range" min="12" max="54" id="fontsize">
  </div>
</div>
<div class="col-sm-8">
  <div class="parent-canvas">
    <div class="text-canvas" id="text-canvas" contenteditable="true">
      my text
    </div>
    <div class="image-canvas">
      <div class="imageupload" onclick="submit_button()">
        <img src="http://placehold.it/100x100">
      </div>

    </div>
  </div>
</div>

CSS

.text-canvas {
  z-index: 1;
  position: absolute;
}

.imageupload {
  z-index: -1;
}

.parent-canvas {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.text-canvas {
  word-break: break-all;
  max-width: 100%;
}

.image-canvas img {
  vertical-align: middle;
}

JavaScript

function submit_button() {
  /* ....Image upload function.. */
}
$(".text-canvas").draggable({
  containment: ".imageupload",
  create: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  drag: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  start: function() {
    $("#text-canvas ").css("width ", 'auto');
  },
  stop: function() {
    $("#text-canvas ").css("width ", 'auto');
  }
});

$("#fontsize").on("change", function() {
  var v = $(this).val();
  $('.text-canvas').css('font-size', v + 'px');
});