从可编辑文件中插入文本格式<div>或 textarea 进入数据库</div><div id="text_translate"><p>我目前正在为我自己的网站开发一个个人项目，我正在尝试添加将格式化文本存储到数据库中的功能。到目前为止，我所做的是能够将字体从斜体更改为粗体作为示例，但我完全不知道如何将其传递到数据库。</p><pre> <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></pre><p> 示例工作： <a href="https://codepen.io/goldenowl/pen/KKdZQxY" rel="nofollow noreferrer">codepen</a></p></div>

Question

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>

Sample work: codepen示例工作： codepen

Answer 1

To access the content in that editable div, you can use:要访问该可编辑 div 中的内容，您可以使用：

let content = $('#fake_textarea').html();

Regarding sending the data through to PHP, the easiest solution would probably be to use Ajax .关于将数据发送到 PHP，最简单的解决方案可能是使用Ajax 。

Alternative选择

If you don't want to use Ajax but rather an ordinary form post, you could let the button trigger a function that get's the content and populates it into a hidden field in a form, which you then submit.如果您不想使用 Ajax 而是使用普通的表单帖子，则可以让按钮触发 function 获取内容并将其填充到表单中的隐藏字段中，然后提交。

Something like this: (untested pseudo code)像这样的东西：（未经测试的伪代码）

HTML: HTML：

<form method="post" action="foo.php" id="some-form">
    <input type="hidden" name="content" id="some-hidden-input" />
    <div id="fake_textarea" ...></div>
    <button id="submit-button"></button>
</form>

JS: JS：

$('#submit-button').on('click', function (e) {
    // Stop the default submission
    e.preventDefault();

    // Get the content from the div
    let content = $('#fake_textarea').html();

    // Store the content in a hidden input
    $('#some-hidden-input').val(content);

    // Submit the real form
    $('#some-form').submit();
});

Note笔记

I'm using jQuery in these examples since you show that you're using it.我在这些示例中使用 jQuery，因为您表明您正在使用它。 All this can of course be done in vanilla JS as well.所有这些当然也可以在 vanilla JS 中完成。

Answer 2

Alright so I have tweaked Magnus' code a bit and I do thank him a lot for helping me figure this out.好的，所以我稍微调整了 Magnus 的代码，我非常感谢他帮助我解决这个问题。

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. textarea.php 您将在此处编写自己的内容、格式化文本并将其放入您的 php 文件中，然后再将其插入到数据库中。 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 This file will submit the value thrown from the hidden input to the database. postcontent.php 此文件将从隐藏输入中抛出的值提交到数据库。

<?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.希望这会像这个人帮助我一样帮助别人。

问题描述

2 个解决方案

解决方案1
1 2020-05-05 14:03:01

Alternative选择

Note笔记

解决方案2
0 已采纳 2020-05-06 22:49:53

问题描述

2 个解决方案

解决方案1 1 2020-05-05 14:03:01

Alternative选择

Note笔记

解决方案2 0 已采纳 2020-05-06 22:49:53

解决方案1
1 2020-05-05 14:03:01

解决方案2
0 已采纳 2020-05-06 22:49:53