我想从 contenteditable div 获取数据并插入数据库我该怎么做？
[英]i want to get data from contenteditable div and insert into database how can i do that?
问题描述
is it possible to get data that contain html element from content editable div.
是否可以从内容可编辑的 div 中获取包含 html 元素的数据。
<div id="content" class="content" name="content" contenteditable="true" spellcheck="false"\>
<b>hallo</b>world
3 个解决方案
解决方案1
0 2023-01-21 09:17:30
There are many ways to do that but one of the best way you can start is by learning these things:有很多方法可以做到这一点，但您可以开始的最好方法之一是学习这些东西：
- DOM DOM
- JavaScript JavaScript
- Sending HTTP request发送 HTTP 请求
- Getting Data from HTTP request with PHP使用 PHP 从 HTTP 请求获取数据
- Save the data in DB with PHP使用 PHP 将数据保存在 DB 中
解决方案2
0 2023-01-21 10:25:48
You can use the example below, Press Button Save, It will alert the data stored in div.您可以使用下面的示例，按下按钮保存，它将提醒存储在 div 中的数据。
<!DOCTYPE html>
<html>
<body>
<div id="content" class="content" name="content" contenteditable="true" spellcheck="false"\>
<b>hallo</b>world
</div>
<button onClick="textFromDiv()">Save</button>
</body>
<script>
function textFromDiv(){
var divText = document.getElementById('content'),
htmlContent = divText.innerHTML;
alert(htmlContent);
}
</script>
</html>
After this you can use the variable htmlContent that contains the data inside the div.在此之后，您可以使用包含 div 内数据的变量 htmlContent。
解决方案3
0 2023-01-21 11:07:23
In order to insert the text/html content from a contendeditable element within a webpage you will need to use Javascript to either send via ajax ( as suggested earlier ) or send as a regular form submission to the server.为了从网页中的 contenteditable 元素insert文本/html 内容，您需要使用contendeditable通过 ajax 发送（如前所述）或作为常规表单提交发送到服务器。
In the following code example the actual content is sent using fetch to the server - in this case it simply uses location.href to point to itself but in practice this could be a normal script path, such as /path/to/script.php在下面的代码示例中，实际内容是使用fetch发送到服务器的 - 在这种情况下，它只是使用location.href指向自身，但实际上这可能是一个普通的脚本路径，例如/path/to/script.php
On the server, the PHP script will have access to the POST array and specifically content via $_POST['content'] - from which point you can craft the sql statement and commit to db.在服务器上，PHP 脚本将可以访问POST数组，特别是通过$_POST['content'] content从这一点您可以制作 sql 语句并提交给 db。
eg:例如：
<?php
if( isset( $_POST['content'] ) ){
$sql='insert into `<TABLE>` ( `content` ) values ( ? )';
$stmt=$db->prepare($sql);
$stmt->bind_param('s',$_POST['content']);
$stmt->execute();
$stmt->close();
exit('ok..');
}
?>
let div=document.querySelector('#content'); let bttn=document.querySelector('input[type="button"]'); bttn.addEventListener('click',e=>{ let fd=new FormData(); fd.set('content',div.innerHTML); fetch( location.href, { method:'post', body:fd } ).then(r=>r.text()).then(console.log).catch(alert) });
<div class="content" id="content" contenteditable="true" spellcheck="false"> hello <b>World?</b> What's occuring? </div> <input type='button' value='Get Contents & send to Server' />
Note: due to the sandbox restrictions here the snippet will not allow the Fetch request to localhost!注意：由于此处的沙箱限制，该代码段将不允许对本地主机的 Fetch 请求！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.