将数据从内容可编辑div复制到隐藏输入以进行表单提交?

时间:2016-03-20 17:26:41

标签: javascript php jquery html

我想从我的contenteditable div中正确复制我的数据,以便我可以将其提交到我的数据库。这将是一个类似于Facebook的帖子。我的代码如下所示:

<div id="urlinput" class="isPlaceholder" role="textbox" spellcheck="true"   aria-multiline="true"  data-placeholder-default="This is the Status text" contenteditable="true">
</div>

输入一些数据后,html如下所示:

<div id="urlinput" class="isPlaceholder" role="textbox" spellcheck="true" aria-multiline="true" data-placeholder-default="This is the Status text" contenteditable="true">This is line one<div>This is line two</div><div>This is line 3</div><div><br></div></div>

因为对于contenteditable div,每一行都用另一个div分隔,最好的方法是安全地执行此操作并保持结构,所以当我稍后从数据库中提取数据时,它仍然保持格式化,当我放置时它在视图中。

2 个答案:

答案 0 :(得分:0)

你可以试试这个:

var contentEditableContent = $('#urlinput').html();

您的内容可编辑div看起来很熟悉,是Medium Editor吗?如果是这样,您可以通过以下方式获取内容:

editor.serialize()['element-0'].value;

答案 1 :(得分:0)

您可以在发送到服务器之前对可编辑div的内容进行编码,并在从服务器检索后进行解码。

编码:

var urlinputVal = $("#urlinput").html();
var toSend = $('<span/>').text(urlinputVal).html();

解码:

var toRender = $('<span/>').text(serverVal).text();
$("#urlinput").html(toRender);