Insert text format from an editable or textarea into the database

问题

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

回答1:

To access the content in that editable div, you can use:

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

Regarding sending the data through to PHP, the easiest solution would probably be to use 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.

Something like this: (untested pseudo code)

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:

$('#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. All this can of course be done in vanilla JS as well.

回答2:

Alright so I have tweaked Magnus' code a bit and I do thank him a lot for helping me figure this out.

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 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.

来源：https://stackoverflow.com/questions/61613704/insert-text-format-from-an-editable-div-or-textarea-into-the-database

标签

javascript