JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width=100% border=2 bordercolor=green cellspacing=0 cellpadding=0 rules=all>  
  <tr>
    <td colspan=2 align=center>ТАБЛИЦА 1</td>
  </tr>
  <tr>
    <td ><IMG width=100 height=100 border=1 alt=no_photo></IMG></td>
    <td class=editable align=left width=100%> 1</td>                      
   </tr>    
  <tr>
    <td class=editable colspan=2 align=left>КОРОТКАЯ СТРОКА</td>
  </tr>
</table>

JavaScript

$.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {
    if (elem.setSelectionRange) {
        elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
    });
    return this;
};
$(document)
       .ready(function () {
           $(".editable")
               .click(function () {
                   var text =  $(this).html(),
                       varX = $("<textarea/>", {
                       "text":text,                                              
                       "height":$(this).height(),
                       "width":$(this).width(),
                       "css":{"background-color":"#FFCCCC"},
                       "click": function (event) {
                           event.stopPropagation()
                       },
                       "blur": function () {
                           alert('blur');
                           $(this).parent().html($(this).val())
                       }
                   });
                   
                   $(this).html(varX);
                   varX.setCursorPosition(text.length)
               });
       });