클릭으로 편집기를 여는 방법

Question

5 개의 div가있는 페이지가 있으며 선택한 div를 클릭하여 편집기를 열고 싶습니다.

그리고 div 내용이 내가 이것을 위해 무엇을 할 것인지 편집자에게 올 것입니다.

여기에 j 쿼리가 있습니다.

Answer 1

내용을 편집 하시겠습니까? Jeditable 플러그인을 보셨습니까?

Answer 2

NicEdit 또는 TinyMCE를 확인하십시오. 둘 다 div 또는 다른 요소의 내용을 편집하도록 구성 할 수 있습니다.

Answer 3

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 

});