How to open editor in click.

Question

I have page with 5 divs and i want to open editor on click of selected div .

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

is there any j query for this.

Answer 1

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

Answer 2

    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

});

Answer 3

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