Question

我正在尝试允许我的客户通过访问该页面来更改所有段落内容，即以纯粹的WYSIWYG模式。

例如，点击第一段，他会在现有内容之前添加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

尝试使用附加到input元素的p个字段，.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>

在线更改源代码

1 个答案: