从可编辑的< div>中插入文本格式或textarea进入数据库 [英] Insert text format from an editable <div> or textarea into the database
本文介绍了从可编辑的< div>中插入文本格式或textarea进入数据库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在为自己的网站开发一个个人项目，其中我试图增加一种将格式化文本存储到数据库中的功能.到目前为止，作为示例，我已经能够将字体从斜体更改为粗体，但是我完全不知道如何将其传递给数据库.
I am currently working on a personal project for my own website wherein I am trying to add in a feature of storing formatted text into the database. So far what I have done is able to change the font from italic to bold as a sample but I am completely clueless how I can pass this through to the database.
<style>
#fake_textarea {
width: 100%;
height: 200px;
border: 1px solid red;
}
#jBold {
font-weigth: bold;
}
#jItalic{
font-style:italic;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button>
<div id='fake_textarea' contenteditable>
Select some text and click the button to make it bold...
<br>Or write your own text
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#jBold').click(function() {
document.execCommand('bold');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#jItalic').click(function() {
document.execCommand('italic');
});
});
</script>
</body>
</html>
样本工作: codepen
推荐答案
好的，所以我稍微调整了Magnus的代码，非常感谢他帮助我解决了这个问题.
Alright so I have tweaked Magnus' code a bit and I do thank him a lot for helping me figure this out.
textarea.php在这里，您将编写自己的内容，设置文本格式并将其扔到您的php文件中，然后将其插入数据库.我也为那些想从中学习的人添加了评论.
textarea.php This is where you will write your own content, format the text and throw it to your php file that in turn would insert it to the database. I added comments for those that wants to learn from this as well.
<style>
#fake_textarea {
width: 100%;
height: 200px;
border: 1px solid red;
}
<!-- Add css to modify the text -->
#jBold {
font-weigth: bold;
}
#jItalic{
font-style:italic;
}
#jUnderline{
text-decoration: underline;
}
#jLT{
text-decoration: line-through;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<body>
<!-- Put buttons here to modify the format -->
<div>
<select id="select_font" onchange="changeFont(this);">
<option value="Arial">Arial</option>
<option value="Sans Serif" selected>Sans Serif</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Impact">Impact</option>
<option value="Bookman">Bookman</option>
<option value="Garamond">Garamond</option>
<option value="Palatino">Palatino</option>
<option value="Georgia">Georgia</option>
</select>
<select id="select-size" onchange="changeSize(this);">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="28">28</option>
<option value="32">32</option>
<option value="36">36</option>
<option value="40">40</option>
<option value="44">44</option>
<option value="48">48</option>
<option value="52">52</option>
<option value="56">56</option>
<option value="58">58</option>
</select>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button><button id="jUnderline">U</button><button id="jSuperScript">A<sup>A</sup></button><button id="jSubScript">A<sub>A</sub></button>
<button id="jLT">A</button>
<div>
<!-- Add a form -->
<form method="post" action="postcontent.php" id="contentform">
<!-- Add some hidden input in order for the form to submit some sort of value -->
<input type="hidden" name="content" id="hiddeninput" />
<!-- Add a place to insert the content -->
<div id='fake_textarea' contenteditable>
Select some text and click the button to make it bold...
<br>Or write your own text
</div>
<!-- Add a submit button-->
<button id="submit">Submit</button>
</form>
<!-- Script to make a selected text bold-->
<script type="text/javascript">
$(document).ready(function() {
$('#jBold').click(function() {
document.execCommand('bold');
});
});
</script>
<!-- Script to make a selected text italic-->
<script type="text/javascript">
$(document).ready(function() {
$('#jItalic').click(function() {
document.execCommand('italic');
});
});
</script>
<!-- Script to make add an underline-->
<script type="text/javascript">
$(document).ready(function() {
$('#jUnderline').click(function() {
document.execCommand('underline');
});
});
</script>
<!-- Script to make make selected text a superscript-->
<script type="text/javascript">
$(document).ready(function() {
$('#jSuperScript').click(function() {
document.execCommand('superscript');
});
});
</script>
<!-- Script to make make selected text a subscript-->
<script type="text/javascript">
$(document).ready(function() {
$('#jSubScript').click(function() {
document.execCommand('subscript');
});
});
</script>
<!-- Script to add a line-through-->
<script type="text/javascript">
$(document).ready(function() {
$('#jLT').click(function() {
document.execCommand('strikeThrough');
});
});
</script>
<!-- Changes the font type -->
<script type="text/javascript">
function changeFont(font) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-family:' + font.value + ';';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}
</script>
<!-- Changes the font size -->
<script type="text/javascript">
function changeSize(size) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-size:' + size.value + 'px;';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}
</script>
<!-- Script to add value to the hidden input then submits it-->
<script type="text/javascript">
$( "#submit" ).click(function() {
var htmlString = $( "#fake_textarea" ).html();
$('#hiddeninput').val(htmlString);
// Submit the real form
$('#contentform').submit();
});
</script>
</body>
postcontent.php该文件会将从隐藏的输入中抛出的值提交到数据库中.
postcontent.php This file will submit the value thrown from the hidden input to the database.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
//grabs the name of the hidden input that was posted
$pcd= $_POST['content'];
$uid="";
$bid="";
$cnum="";
$cid="";
//connect to database
$mysqli = new mysqli("localhost","root","","nw");
//error checking the connection
if ($mysqli -> connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
exit();
}
//submits it
$stmt= $mysqli->prepare("INSERT INTO usercontent (userid, bookid, chapterid, chapternum,data) VALUES (?,?,?,?,?)");
$stmt->bind_param("sssss", $uid, $bid,$cid, $cnum,$pcd);
$stmt->execute();
$stmt -> close();
$mysqli -> close();
}
?>
希望这对某人的帮助与该人对我的帮助一样.
Hopes this will help someone as much as this person helped me.
这篇关于从可编辑的< div>中插入文本格式或textarea进入数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
