<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Content Entry Form</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>

    <style>
        textarea {
            width: 4in;
            height: 2in;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Content Entry Form</h2>
        <form action="submit_content.php" method="post">
            <div class="row">
                <!-- Column 1 -->
                <div class="col-md-4">
                    <!-- Fields 1 to 7 -->
                    <div class="form-group">
                        <label for="content_1">PHP #1 = Content 1 thru 2</label>
                        <textarea class="form-control" id="content_1" name="content_1"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_2">Content 2: Post Subject</label>
                        <textarea class="form-control" id="content_2" name="content_2"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_3">PHP #2 = Content 3 thru 6</label>
                        <textarea class="form-control" id="content_3" name="content_3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_4">Content 4</label>
                        <textarea class="form-control" id="content_4" name="content_4"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_5">Content 5: Trailer Specs</label>
                        <textarea class="form-control" id="content_5" name="content_5"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_6">Content 6</label>
                        <textarea class="form-control" id="content_6" name="content_6"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_7">PHP #3 = Content 7 thru 10 </label>
                        <textarea class="form-control" id="content_7" name="content_7"></textarea>
                    </div>
                </div>
                
                <!-- Column 2 -->
                <div class="col-md-4">
                    <!-- Fields 8 to 14 -->
                    <div class="form-group">
                        <label for="content_8">Content 8</label>
                        <textarea class="form-control" id="content_8" name="content_8"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_9">Content 9</label>
                        <textarea class="form-control" id="content_9" name="content_9"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_10">Content 10</label>
                        <textarea class="form-control" id="content_10" name="content_10"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_11">PHP #4 = Content 11 XXX Summary of Section 1 and 2 </label>
                        <textarea class="form-control" id="content_11" name="content_11"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_12">PHP #5 = Content 12 thru 14</label>
                        <textarea class="form-control" id="content_12" name="content_12"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_13">Content 13</label>
                        <textarea class="form-control" id="content_13" name="content_13"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_14">Content 14: Enter stuff about business</label>
                        <textarea class="form-control" id="content_14" name="content_14"></textarea>
                    </div>
                </div>
                
                <!-- Column 3 -->
                <div class="col-md-4">
                    <!-- Fields 15 to 20 -->
                    <div class="form-group">
                        <label for="content_15">Content 15</label>
                        <textarea class="form-control" id="content_15" name="content_15"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_16">Content 16</label>
                        <textarea class="form-control" id="content_16" name="content_16"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_17">Content 17</label>
                        <textarea class="form-control" id="content_17" name="content_17"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_18">Content 18</label>
                        <textarea class="form-control" id="content_18" name="content_18"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_19">Content 19</label>
                        <textarea class="form-control" id="content_19" name="content_19"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content_20">Content 20</label>
                        <textarea class="form-control" id="content_20" name="content_20"></textarea>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        // Function to handle paste event in textareas
    document.addEventListener("DOMContentLoaded", function() {
    var textareas = document.querySelectorAll("textarea");

    textareas.forEach(function(textarea) {
        CKEDITOR.replace(textarea, {
            on: {
                instanceReady: function(evt) {
                    var editor = evt.editor;

                    editor.on("paste", function(e) {
                        var data = e.data;

                        // Filter out img tags
                        var div = document.createElement("div");
                        div.innerHTML = data.dataValue;
                        var images = div.getElementsByTagName("img");

                        while(images.length) {
                            images[0].parentNode.removeChild(images[0]);
                        }

                        data.dataValue = div.innerHTML;
                    });
                }
            }
        });
    });
});


    </script>
</body>
</html>

