在线更改源代码

Question

我试图让我的客户通过访问页面来更改所有段落内容，即在纯所见即所得模式下。

例如点击第一段他会在现有内容之前添加green。

<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 元素的 input 事件，.index()，$.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>

在线更改源代码

change the source code online

jquery

contenteditable