JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://rawgit.com/gromo/jquery.scrollbar/master/jquery.scrollbar.js"></script>
<body ng-app="MyApp">
  <div id="editable-content" ng-controller="SimpleController">
    <span id="clickable-zone"></span>
    <p id="editfield"  contenteditable="true"></p>
  </div>
</body>

CSS

[contenteditable] {
  border: 2px dotted #ccc;
  background-color: #eee;
  padding: 2px;
  height: 200px;
  width: 500px;
  overflow-y: scroll;
}

.inside_element {
  float:right;
  clear:both;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 50%;
}

.myimage:before {
  content: '';
  display: block;
  float:right;
  height: 100px;
}

#clickable-zone {
  position: absolute;
  bottom: 4px;
  right: 4px;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  float:right;
  background-image: url("https://i.vimeocdn.com/portrait/58832_300x300");
  background-repeat: no-repeat; /*Prevent showing multiple background images*/
  background-size: 100px 100px;
  z-index: 5;
  cursor: pointer;
}

#editable-content {
  height: 208px;
  width: 508px;
  position: relative;
}

JavaScript

var app = angular.module("MyApp", ['jQueryScrollbar']);

app.controller('SimpleController', function($scope){

});

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      var imgPhoto = $('<div class="inside_element"></div>');
      var mydiv = $('<div class="myimage"></div>').append(imgPhoto);
      
      
      element.bind("blur keyup change", function(event) {
        if(element.html() != mydiv[0].outerHTML && element.html() != '') {
					mydiv.prependTo(element);
        }
        else {
          mydiv.remove();
        }
      });

      $(document).on("click","span#clickable-zone",function() {
      	console.log('click');
      });
    }
  };
});