How to open editor in click

I have page with 5 divs and i want to open editor on click of selected di开发者_如何学Pythonv .

And div content will come into the editor what i will do for this.

is there any j query for this.

Do you want to edit the contents in place? Have you looked at the Jeditable plugin?

Check out NicEdit or TinyMCE. Both can be configured to edit the content in a div or any other element.

    CSS:
    .hidden{
       display:none;
    }

    <div id="container">
      <div id="div1" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div2" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div3" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div4" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
      <div id="div5" class="edit-div"><div class="editor hidden"></div><div class="content"></div></div>
    </div>

var xeditorChange = function(el)
{
  if ($(el).length>0)
  {
     $(el).find(".content")
          .empty()
          .html(editor.getText())
          .removeClass("hidden");

     $(el).find(".editor")
         .empty()
         .addClass("hidden");
  }
};

$(function(){
  $(".edit-div").click(function()
{
    xeditorChange( $("#container").find(".editing") );

    editor.addText($(this).find(".content").html());
    $(this).find(".content").addClass("hidden");
    $(this).find(".editor").removeClass("hidden");

    //show editor in  $(this).find(".editor")
});

  //on save text in editor add the html with reverse function

});