Insert text format from an editable
or textarea into the database

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

You can try and get the content of the div with: `let content = $('#fake_textarea').html();`. Then you can post it to PHP using Ajax. — M. Eriksson, May 05 '20 at 13:00
thanks for pointing me to the right path. i added new code to it and now I am able to get the raw html value of it. `` How do I send kudos to you? — Xe Pueblos, May 05 '20 at 13:24

score 1 · Answer 1 · answered May 05 '20 at 14:03

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.

What I have added is this but it seems that it would not post anything to the database. `` — Xe Pueblos, May 06 '20 at 00:35
It's pretty hard to help you with just the above code since there's not debugging info included. You could try to pass the data as an object instead of building the data string manually. Change `data: "pc=" + htmlString` to `data: {pc: htmlString}`. — M. Eriksson, May 06 '20 at 06:37
I have solved it thank you. I have inserted an answer as well of the final edit with comments as I think this would help others on their projects. — Xe Pueblos, May 06 '20 at 22:56

Xe Pueblos · Accepted Answer · 2020-05-07T13:38:47.283

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.

**Warning!** You are _wide open_ for [SQL injection](https://owasp.org/www-community/attacks/SQL_Injection) attacks! You should use parameterized [prepared statements](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) instead of using completely unescaped user data directly in your queries like that. _Never ever ever never_ trust user input. — M. Eriksson, May 07 '20 at 06:11
I was just setting it as a sample but here you go the parameterized statements. — Xe Pueblos, May 07 '20 at 13:37

Insert text format from an editable
or textarea into the database

2 Answers2

Alternative

Note

Linked

Insert text format from an editable or textarea into the database

2 Answers2

Alternative

Note

Linked

Insert text format from an editable
or textarea into the database