在線更改源代碼

Question

我試圖讓我的客戶端通過訪問該頁面來更改所有段落內容，即以純WYSIWYG模式。

例如，點擊第一段，他會在現有內容之前添加​​。

<p>123</p> 
<p>456</p> 
<p>789</p> 

JS

$("p").attr('contenteditable', true); 

$("#btnsave").click(function() { 
    var a = `currentParagraph.newContent`; 
console.log(a) //I need `green 123` here 
}); 

如何獲得編輯的內容作爲一個變量？

此外，爲了更改服務器源代碼，我將使用php-jquery ajax代碼發送新內容，但是如何告訴服務器應該在哪個段落上應用新內容？

任何幫助？

Answer 1

嘗試使用連接到p元素，.index()input事件，$.post()

var curr = null; 
 

 
$("p").attr('contenteditable', true).on("input", function() { 
 
    curr = $(this).index() -1 
 
}) 
 

 
$("#btnsave").click(function() { 
 
    var a = $("p").eq(curr).text(); 
 
    console.log(a, $("div").html()); //I need `green 123` here 
 
    // post `p` elements to server 
 
    // $.post("/path/to/server", {data:$("div").html()}) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
<p>123</p> 
 
<p>456</p> 
 
<p>789</p> 
 
    </div> 
 
<button id="btnsave">click</button>