从textarea更新最后一个目标contenteditable的html

Question

http://liveweave.com/1iWx1x

My problem is simple.

Select/focus on a few contenteditable elements. Then select the textarea and change the last focused element's html from the textarea. The problem is my textarea wants to update all the previously focused elements instead of the last one.

If anyone can help it'd greatly appreciated.

$(document).ready(function() {
  // Grab selected element's html
  $("div").on('focus', function() {
    $("#show-selected-elms-code").val($(this).html());
    $("body").find("div").on('focus', function(e) {
      $("#show-selected-elms-code").val($(e.target).last().html());
      $(this).on('keyup change', function() {
        $("#show-selected-elms-code").val($(this).html());
      });
      $("#show-selected-elms-code").on('keyup change', function() {
        $(e.target).last().html($("#show-selected-elms-code").val());
      });
    });
  });

  $('#elm-font-family').on('click change', function() {
    document.execCommand('FontName',false,$(this).val());
  });
});

Answer 1

You can try this:

$(document).ready(function() {
  var selectedDiv;

  $('[contenteditable]').on('click',function(){
      selectedDiv=this;
  });

  $("div").on('focus keyup change', function() {
    $("#show-selected-elms-code").val($(this).html());
  });

  $("#show-selected-elms-code").on('keyup change', function() {
    $(selectedDiv).html($("#show-selected-elms-code").val());
  });

  $('#elm-font-family').on('click change', function(e) {
    document.execCommand('FontName',false,$(this).val());
  });
});

demo: http://liveweave.com/BfGir8