เปลี่ยนจาก CKeditor เป็น form ธรรมดา เพียง <textarea> เดียว

Uncategorized

October 15, 2025

จากโค๊ดด้านล่างนี้ เป็นส่วนของ form ที่ส่งจากเว็บเข้าอีเมลเลย
โดยผู้ใช้สามารถกรอก ข้อมูล เพิ่มใน … ได้
ผู้ให้บริการก็เขียนโค๊ดง่าย ไม่ต้องมีหลายช่อง
มีวิธีอื่นที่ง่ายและดีกว่านี้ไหม?

<script src="https://cdn.ckeditor.com/4.22.1/standard-all/ckeditor.js"></script>
<form name="contact" action="motor1.php" method="post" enctype="multipart/form-data">
<textarea name="editor1" cols="80" id="editor1" rows="10" >
<!--HTML-->
ชื่อ+นามสกุล  ..............................<br>
ที่อยู่ ...... <br>
เบอร์โทร ... <br>
อีเมล ... <br>
<!--N HTML-->
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
width: '100%',
height: 400,
} );
</script>
</form>

ถ้าความต้องการหลักของคุณคือการให้ผู้ใช้กรอกข้อมูลหลายบรรทัดในรูปแบบ Rich Text (จัดรูปแบบตัวหนา ตัวเอียง ฯลฯ) แล้วส่งข้อมูลทั้งหมดในช่องเดียวไปยังอีเมล โดยเน้นที่ความ ง่าย และ ดีกว่า (ปลอดภัยกว่า, จัดการข้อมูลได้ดีกว่า) โค้ดที่คุณใช้อยู่มีจุดที่สามารถปรับปรุงได้ 2 ส่วนหลัก ๆ คือ:

การจัดการข้อมูลแบบฟอร์ม (Form Data Management): แยกช่องข้อมูลสำคัญออกจาก Rich Text Editor

ความปลอดภัย/ความทันสมัย (Security/Modernization): การเปลี่ยนไปใช้ Rich Text Editor ตัวอื่นที่ทันสมัยกว่า

<hr>

1. วิธีที่ "ง่ายและดีกว่า" โดยการแยกข้อมูล
แม้ว่าโค้ดปัจจุบันของคุณจะง่ายเพราะมี <textarea> เดียว แต่การที่ข้อมูลสำคัญอย่าง ชื่อ ที่อยู่ เบอร์โทร ถูกรวมอยู่ใน Rich Text Editor เดียวกันนั้น ไม่ดี ในแง่ของการประมวลผลข้อมูลในฝั่ง motor1.php และทำให้ผู้ใช้อาจลบ Template ข้อมูลออกได้

วิธีที่ดีที่สุดคือการ ใช้ช่อง input ธรรมดาสำหรับข้อมูลที่มีโครงสร้าง และใช้ Rich Text Editor สำหรับ เนื้อหาอิสระ

โค้ดที่แนะนำ (ง่ายและจัดการดีกว่า)
ใช้ช่อง input และ textarea ธรรมดามาเสริม แล้วให้ CKEditor เหลือไว้แค่ช่องสำหรับ รายละเอียดเพิ่มเติม เท่านั้น

HTML

<form name="contact" action="motor1.php" method="post" enctype="multipart/form-data">
    
    <input type="text" name="name" size="100%" placeholder="ชื่อ+นามสกุล (ผู้ติดต่อ)" required><br>
    <input type="text" name="tel" size="100%" placeholder="เบอร์ที่ติดต่อได้" required><br>
    <input type="email" name="email" size="100%" placeholder="อีเมล์ที่ติดต่อได้" required><br>
    
    <label for="editor1">รายละเอียด/ข้อความเพิ่มเติม (สามารถจัดรูปแบบได้)</label>
    <textarea name="editor1" id="editor1" rows="10">
        สวัสดีครับ, ผมสนใจ...
    </textarea>

    <script src="https://cdn.ckeditor.com/4.24.0/standard-all/ckeditor.js"></script>
    <script>
    CKEDITOR.replace( 'editor1', {
        width: '100%',
        height: 300,
        // ปิดการแจ้งเตือน
        versionCheck: false 
    } );
    </script>

    <div align="center"><input type="Submit" name="submit-FIRE-q" value="OK" class="button-red"/></div>
</form>
ข้อดีของวิธีนี้:

ประมวลผลง่าย: ใน motor1.php คุณสามารถดึงค่า $_POST['name'] หรือ $_POST['email'] ได้ตรง ๆ โดยไม่ต้อง Parsing ข้อความยาว ๆ

บังคับกรอก (Validation): ใช้ required เพื่อให้มั่นใจว่าข้อมูลสำคัญถูกกรอก

ประสบการณ์ผู้ใช้ที่ดีกว่า: ผู้ใช้รู้ว่าต้องกรอกอะไรในช่องไหน ไม่ต้องแก้ไข Template ใน Editor

<hr>

2. ทางเลือก Rich Text Editor อื่น (ทันสมัยและฟรี)
เนื่องจาก CKEditor 4 รุ่น Open Source ไม่ได้รับการอัปเดตด้านความปลอดภัยอีกต่อไป (แม้จะใช้ 4.22.1 ซึ่งเป็นเวอร์ชันสุดท้าย) หากต้องการความง่ายและปลอดภัยในระยะยาว คุณควรพิจารณาเปลี่ยนไปใช้ Editor ตัวอื่นที่เป็น Open Source และยังได้รับการดูแลอยู่

Option A: TinyMCE (Easy and Secure)
TinyMCE มี Free Community Version ที่ได้รับความนิยมมาก สามารถใช้งานผ่าน CDN ได้ง่ายเหมือน CKEditor 4 และยังมีการอัปเดตความปลอดภัยอย่างต่อเนื่อง

โค้ดตัวอย่าง TinyMCE:

HTML

<form name="contact" action="motor1.php" method="post" enctype="multipart/form-data">
    <label for="mytextarea">รายละเอียด/ข้อความเพิ่มเติม</label>
    <textarea name="mytextarea" id="mytextarea">
        สวัสดีครับ, ผมสนใจ...
    </textarea>

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
    tinymce.init({
        selector: '#mytextarea', // ระบุ id ของ textarea
        plugins: 'advlist autolink lists link image charmap print preview', // ปลั๊กอินพื้นฐาน
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        height: 300
    });
    </script>

    <div align="center"><input type="Submit" name="submit-FIRE-q" value="OK" class="button-red"/></div>
</form>
ข้อดี:

ความปลอดภัย: เป็นเวอร์ชันล่าสุดที่ได้รับการดูแลอย่างต่อเนื่อง

ใช้งานง่าย: การติดตั้งคล้าย CKEditor เพียงแค่เปลี่ยน URL และคำสั่ง init

Option B: CKEditor 5 (Open Source GPL)
ถ้าคุณต้องการใช้ CKEditor ต่อไป และโค้ดของคุณสอดคล้องกับ GPL License คุณสามารถใช้ CKEditor 5 เวอร์ชัน Open Source ได้ ซึ่งปลอดภัยและทันสมัยกว่ามาก (แต่การตั้งค่าจะซับซ้อนกว่า CKEditor 4 เล็กน้อย)

ขอโค๊ดตัวอย่างใช้จริงของ ออฟชั่นB โดยใช้ข้อมูลเดิมของผม เหมือนที่คุณทำให้ใน ออฟชั่นA

เนื่องจาก CKEditor 5 มีโครงสร้างและวิธีการทำงานที่แตกต่างจาก CKEditor 4 อย่างมาก การใช้งานแบบ ง่าย ๆ ผ่าน CDN เหมือน CKEditor 4 จึงต้องมีการเรียกใช้สคริปต์และสไตล์ชีทเพิ่มเติม และใช้คำสั่ง create() แทน replace()

อย่างไรก็ตาม ผมจะจัดโครงสร้างโค้ดให้คล้ายกับ Option A (ที่แนะนำ) คือ แยกช่องข้อมูลสำคัญ ออกมาใช้ input ธรรมดา และใช้ CKEditor 5 สำหรับ ช่องรายละเอียด เพื่อให้การส่งข้อมูลเข้าอีเมลทำได้ง่ายและมีประสิทธิภาพที่สุด (หากคุณยืนยันจะใช้ CKEditor 5 สำหรับข้อมูลทั้งหมด ก็สามารถทำได้โดยเปลี่ยน <input> เป็น <textarea> ที่ใช้ CKEditor 5)

CKEditor 5 (Open Source - GPL) โค้ดตัวอย่างใช้จริง
นี่คือโค้ดที่คุณสามารถนำไปใช้ได้ทันที โดยใช้ CKEditor 5 เวอร์ชัน Classic Editor ผ่าน CDN:

HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>CKEditor 5 Example</title>
    
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/47.0.0/ckeditor5.css" />

    <style>
        .button-red {
            background-color: red;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        input, textarea, label {
            width: 100%;
            margin-bottom: 10px;
            box-sizing: border-box; /* สำคัญ: เพื่อให้ width 100% รวม padding/border */
        }
        textarea {
             border: 1px solid #ccc;
             padding: 5px;
        }
    </style>
</head>
<body>

<form name="contact" action="motor1.php" method="post" enctype="multipart/form-data">
    
    <input type="text" name="name" placeholder="ชื่อ+นามสกุล (ผู้ติดต่อ)" required><br>
    <input type="text" name="tel" placeholder="เบอร์ที่ติดต่อได้" required><br>
    <input type="email" name="email" placeholder="อีเมล์ที่ติดต่อได้" required><br>

    <label>รายละเอียด/ข้อความเพิ่มเติม (สามารถจัดรูปแบบได้)</label>
    <div id="editor1" name="editor1" contenteditable="true">
        <p>เริ่มต้นพิมพ์ข้อความที่นี่...</p>
    </div>
    
    <script src="https://cdn.ckeditor.com/ckeditor5/47.0.0/ckeditor5.umd.js"></script>

    <script>
        // CKEditor 5 จะถูกเปิดเผยใน Global Variable ชื่อ CKEDITOR
        const { ClassicEditor, Essentials, Paragraph, Bold, Italic, List, SourceEditing, Link } = CKEDITOR;

        ClassicEditor
            .create( document.querySelector( '#editor1' ), {
                // *** สำคัญ: ต้องใส่ licenseKey เป็น 'GPL' เพื่อใช้แบบ Open Source ***
                licenseKey: 'GPL', 
                
                // กำหนด Plugins ที่ต้องการใช้ (ต้องระบุชัดเจน)
                // เราเพิ่ม SourceEditing ให้คุณสามารถดู/แก้ไข HTML ได้เหมือน CKEditor 4
                plugins: [ Essentials, Paragraph, Bold, Italic, List, Link, SourceEditing ],
                
                // กำหนด Toolbar ที่ต้องการแสดง
                toolbar: [
                    'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'sourceEditing'
                ],
                
                // กำหนดความสูง
                // Note: CKEditor 5 จัดการความสูงผ่าน CSS หรือการตั้งค่าอื่นๆ ได้ดีกว่า 4
                // สามารถใช้ CSS หรือตั้งค่าผ่าน EditorConfig ได้ถ้าต้องการควบคุมละเอียด
                // ในตัวอย่างนี้ เราจะปล่อยให้เป็นไปตามขนาดของ content/default
            } )
            .then( editor => {
                // ถ้าต้องการเข้าถึง Editor instance (ไม่จำเป็นสำหรับงานนี้)
                window.editor = editor;
                
                // ตั้งความสูงของ Editor Area (ไม่รวม Toolbar)
                editor.editing.view.change( writer => {
                    writer.setStyle( 'min-height', '350px', editor.editing.view.document.getRoot() );
                } );
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
    
    <div align="center"><input type="Submit" name="submit-FIRE-q" value="OK" class="button-red"/></div>
</form>
</body>
</html>
สรุปความแตกต่างที่สำคัญของ CKEditor 5
ต้องใช้ Stylesheet: ต้องเพิ่ม <link rel="stylesheet" ...> สำหรับสไตล์ของ Editor (จุดที่ 1)

ใช้ <div> แทน <textarea>: CKEditor 5 Classic Editor ต้องสร้างบน <div> ที่มี contenteditable="true" (ในโค้ดเดิมของคุณ)

คำสั่งเปลี่ยนเป็น create(): ใช้ ClassicEditor.create( document.querySelector( '#editor1' ), { ... } ) แทน CKEDITOR.replace()

ต้องระบุ licenseKey: 'GPL': จำเป็นต้องระบุชัดเจนเพื่อยืนยันการใช้แบบ Open Source

ต้องระบุ plugins และ toolbar: ต้องกำหนดชัดเจนว่าต้องการใช้ฟีเจอร์ใดบ้าง (CKEditor 5 เป็นแบบ Modular)

ถ้าผมไม่สนใจ การประมวลผลข้อมูลในฝั่ง motor1.php และ การที่ผู้ใช้จะลบ Template ข้อมูล
มีวิธีไหนที่ดีกว่าเดิมไหม เช่น form ใช้ เดียว แต่ผมไม่รู้ว่าจะสร้าง template ข้อมูล ได้อย่างไร ในรูปแบบ html ที่ผมใช้กับกรณี CKeditor4

ถ้าคุณต้องการคงรูปแบบ <textarea> เดียว สำหรับทั้ง Rich Text และ Template ข้อมูล เพื่อความง่ายที่สุดในการเขียนโค้ดฝั่ง HTML/Form และไม่สนใจปัญหาการประมวลผลหรือการลบ Template, วิธีที่ดีกว่าเดิมคือการ เปลี่ยนไปใช้ CKEditor 5 เหมือนเดิม เพื่อให้ได้ Editor ที่มีความปลอดภัยสูงขึ้นและยังคงความสามารถในการโหลด Rich Text Template เข้าไปในช่อง <textarea> ได้ครับ

โค้ดที่แนะนำ: ใช้ CKEditor 5 กับ `<textarea>` เดิม

CKEditor 5 Classic Build สามารถใช้งานกับ <textarea> ได้เหมือน CKEditor 4 ครับ แต่ต้องปรับวิธีการโหลดสคริปต์เล็กน้อย และใช้ฟีเจอร์ที่เรียกว่า Decoupled Editor หรือใช้ Classic Editor ที่รองรับการสร้างบน textarea ได้

วิธีที่ง่ายที่สุดและใกล้เคียง CKEditor 4 มากที่สุด คือใช้ Classic Editor และให้มัน “สร้าง” บน div หรือ textarea ของคุณ:

HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>CKEditor 5 - Simple Form</title>
    
    <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/47.0.0/ckeditor5.css" />

    <style>
        .button-red { /* คงสไตล์เดิม */ }
        textarea { width: 100%; box-sizing: border-box; }
        /* สไตล์สำหรับ CKEditor 5 ถ้าใช้ textarea อาจต้องมีการปรับแต่งเพิ่มเติม */
        .ck-editor__editable_inline {
            min-height: 400px; /* กำหนดความสูงของพื้นที่แก้ไข */
        }
    </style>
</head>
<body>

<form name="contact" action="motor1.php" method="post" enctype="multipart/form-data">
    
    <textarea name="editor1" id="editor1" rows="10">
        <p><strong>ชื่อ+นามสกุล:</strong> ..............................</p>
        <p><strong>ที่อยู่:</strong> ..............................</p>
        <p><strong>เบอร์โทร:</strong> ..............................</p>
        <p><strong>อีเมล:</strong> ..............................</p>
        <p>&nbsp;</p>
        <p><strong>ข้อความ/รายละเอียดเพิ่มเติม:</strong></p>
    </textarea>
    
    <script src="https://cdn.ckeditor.com/ckeditor5/47.0.0/ckeditor5.umd.js"></script>

    <script>
        const { ClassicEditor, Essentials, Paragraph, Bold, Italic, List, SourceEditing, Link, Heading } = CKEDITOR;

        ClassicEditor
            .create( document.querySelector( '#editor1' ), {
                // *** สำคัญ: ต้องใส่ licenseKey เป็น 'GPL' เพื่อใช้แบบ Open Source ***
                licenseKey: 'GPL', 
                
                plugins: [ Essentials, Paragraph, Bold, Italic, List, Link, SourceEditing, Heading ],
                
                // กำหนด Toolbar ให้คล้าย CKEditor 4 (สามารถปรับได้ตามต้องการ)
                toolbar: [
                    'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'sourceEditing', 'undo', 'redo'
                ],
                
                // สามารถใช้ config เพื่อควบคุมความสูงได้ แต่ใน CKEditor 5 นิยมใช้ CSS ควบคุม min-height
            } )
            .catch( error => {
                console.error( 'CKEditor 5 failed to initialize:', error );
            } );
    </script>
    
    <div align="center"><input type="Submit" name="submit-FIRE-q" value="OK" class="button-red"/></div>
</form>

</body>
</html>

สรุปข้อดีของวิธีนี้ (CKEditor 5)

ความปลอดภัยสูงกว่า: CKEditor 5 ถูกออกแบบมาโดยเน้นความปลอดภัย (Built-in Content Filtering) ทำให้การแทรกโค้ดอันตราย (XSS) ผ่าน Content Template ที่คุณสร้างไว้ทำได้ยากกว่า CKEditor 4 มาก
โครงสร้างโค้ดเหมือนเดิม: โค้ดฝั่ง <form> และ <textarea> ยังคงรูปแบบเดิม
รองรับ HTML Template: เนื้อหา HTML (Template) ที่อยู่ใน <textarea> จะถูกแปลงเป็น Rich Text Editor โดยอัตโนมัติ ทำให้ผู้ใช้สามารถกรอกข้อมูลทับ Template ที่คุณเตรียมไว้ได้.

การใช้ อย่างเดียว ไมไ่ด้เหรอในการ แสดง เนื้อหา HTML (Template) ที่อยู่ใน <textarea> จะถูกแปลงเป็น Rich Text Editor โดยอัตโนมัติ

การใช้ <textarea> อย่างเดียวในการแสดงผล Rich Text Editor เป็นวิธีที่คุณคุ้นเคยจาก CKEditor 4 และมัน ยังทำได้ ใน CKEditor 5 เวอร์ชัน Classic Editor ครับ

แต่มีรายละเอียดที่ต้องเข้าใจเล็กน้อยเกี่ยวกับความแตกต่างของ CKEditor 4 กับ CKEditor 5 ดังนี้:

CKEditor 4 (รุ่นเก่า)

ใน CKEditor 4 คำสั่ง CKEDITOR.replace( 'editor1' ) นั้น ง่ายมาก เพราะมันถูกออกแบบมาให้:

ซ่อน ตัว <textarea> เดิม
สร้าง โครงสร้าง HTML/Rich Text Editor ใหม่ ทับซ้อน ขึ้นมาแทน
คัดลอก เนื้อหา HTML ที่อยู่ใน <textarea> เดิมมาแสดงใน Editor ใหม่ทันที

ดังนั้นการใช้ <textarea> จึงเป็นเรื่องง่ายและเป็นวิธีหลัก

CKEditor 5 (รุ่นใหม่)

CKEditor 5 มีโครงสร้างพื้นฐานที่ต่างกันมาก (ใช้สถาปัตยกรรม Model-View-Controller) แต่ทีมผู้พัฒนาได้ออกแบบให้ Classic Editor ยังคงรองรับการทำงานกับ <textarea> เพื่ออำนวยความสะดวกในการย้ายจาก CKEditor 4 ครับ

เมื่อคุณใช้คำสั่ง ClassicEditor.create( document.querySelector( '#editor1' ) ) โดยที่ #editor1 คือ <textarea> มันจะทำดังนี้:

สร้าง Editor แบบ Classic ขึ้นมา
อ่าน เนื้อหา (HTML) จาก <textarea>
แปลง เนื้อหา HTML นั้นให้เข้ากับ Model ข้อมูล ของ CKEditor 5 (ซึ่งเป็นกระบวนการที่เข้มงวดและปลอดภัยกว่า CKEditor 4)
แสดงผล Rich Text Editor ที่มีเนื้อหา Template ของคุณอยู่

ดังนั้น ใช่ครับ! คุณใช้ <textarea> ได้เหมือนเดิม โดยมีข้อดีของ CKEditor 5 คือความปลอดภัยที่สูงกว่ามากในการจัดการ HTML Template นั้น

โค้ดตัวอย่างในคำตอบก่อนหน้าจึงใช้ <textarea> เพื่อให้ตรงตามความต้องการของคุณในการรักษาโครงสร้างฟอร์มให้เรียบง่ายที่สุด

ผมหมายถึงถ้าจะใช้ form แบบปกติ ที่มี อันเดียว ไม่ใช้ ckeditor

ถ้าคุณหมายถึงการใช้ฟอร์มแบบปกติที่มีแค่ <textarea> อันเดียว โดยที่ไม่ใช้ CKEditor (หรือไม่ใช้ Rich Text Editor ใดๆ เลย) เพื่อให้ผู้ใช้กรอกข้อมูลและส่งเข้าอีเมล โค้ดที่ง่ายที่สุดและปลอดภัยที่สุดคือการใช้ HTML ธรรมดาโดยตรงครับ

โค้ดตัวอย่างที่ตัด CKEditor ออก

การใช้ <textarea> เปล่าๆ จะทำให้ข้อมูลที่ผู้ใช้กรอกถูกส่งไปเป็น Plain Text ทั้งหมด ซึ่งปลอดภัยจากช่องโหว่ XSS ที่มาจาก Editor ครับ

HTML

<form name="contact" action="motor1.php" method="post">
    
    <textarea name="editor1" cols="80" id="editor1" rows="10" placeholder="กรุณากรอกข้อมูลที่นี่...">
        
        ชื่อ+นามสกุล: ..............................
        ที่อยู่: ..............................
        เบอร์โทร: ..............................
        อีเมล: ..............................
        
        รายละเอียด:
        
    </textarea>

    <input type="Text" name="name" size="100%" placeholder="ชื่อ+นามสกุล (ผู้ติดต่อ)" required/><br>
    <input type="Text" name="tel" size="100%" placeholder="เบอร์ที่ติดต่อได้" required/><br>
    <input type="Text" name="email" size="100%" placeholder="อีเมล์ที่ติดต่อได้" required/>

    <div align="center"><input type="Submit" name="submit-FIRE-q" value="OK" class="button-red"/></div>
</form>

ข้อดี-ข้อเสีย (เมื่อเทียบกับการใช้ Editor)

คุณสมบัติ	การใช้ `<textarea>` ธรรมดา	การใช้ CKEditor (หรือ Rich Text Editor)
ความง่าย (โค้ด HTML)	ง่ายที่สุด เพราะไม่ต้องโหลดไฟล์ JavaScript/CSS เพิ่ม	ต้องโหลดไฟล์และรัน Script เพื่อเรียกใช้งาน
ความสามารถของผู้ใช้	ผู้ใช้กรอกได้แค่ Plain Text ไม่สามารถจัดรูปแบบ (ตัวหนา, ตัวเอียง, สี) ได้	ผู้ใช้สามารถจัดรูปแบบข้อความและแทรกรูปภาพ/ตารางได้
ความปลอดภัย	ปลอดภัยสูงสุด เพราะไม่มี Editor มาเป็นช่องทางให้แทรกโค้ดอันตราย	ปลอดภัยถ้าใช้เวอร์ชันล่าสุด แต่ถ้าใช้รุ่นเก่า (เช่น 4.7.3) จะมีความเสี่ยง XSS
Template	สามารถใส่ Template เป็นข้อความธรรมดาได้ แต่ผู้ใช้ก็ลบทิ้งได้ง่าย	สามารถใส่ Template เป็น HTML ได้ และผู้ใช้สามารถแก้ไขได้ง่ายกว่า

Export to Sheets

สรุป: ถ้าคุณไม่ต้องการให้ผู้ใช้จัดรูปแบบข้อความใดๆ เลย และต้องการความง่ายสูงสุดในการเขียนโค้ดฝั่ง Front-end การใช้ <textarea> ธรรมดาตามโค้ดด้านบนก็เป็นทางออกที่ตรงไปตรงมาและปลอดภัยที่สุด

แล้วข้อมูลใน <textarea> จะขึ้นบรรทัดใหม่ได้อย่างไร เพราะ ถ้าจะเขียนแบบที่คุณเขียนมา ไม่แน่ใจว่า เมื่อส่งเข้าเมล มันจะเป็นข้อความติดกันหมด ไม่ขึ้นบรรทัดหรือไม่?

นี่เป็นคำถามที่ดีมากครับ! เมื่อใช้ <textarea> ธรรมดา โดยไม่ใช้ Rich Text Editor และไม่มีการประมวลผลพิเศษ ข้อมูลที่ผู้ใช้กรอกจะถูกส่งไปเป็น Plain Text และการขึ้นบรรทัดใหม่จะถูกแปลงเป็นอักขระพิเศษครับ

1. ข้อมูลถูกส่งไปอย่างไร (ใน `motor1.php`)

เมื่อผู้ใช้พิมพ์ข้อความใน <textarea> แล้วมีการขึ้นบรรทัดใหม่ (โดยการกด Enter):

ในฝั่งเบราว์เซอร์ (Browser) การขึ้นบรรทัดใหม่จะถูกแทนด้วยอักขระ Line Feed (\n) หรือ Carriage Return + Line Feed (\r\n)
ข้อมูลที่ถูกส่งไปยังสคริปต์ motor1.php (ผ่าน $_POST['editor1']) จะ มีอักขระ \n เหล่านี้รวมอยู่ด้วย

2. ปัญหาการแสดงผลในอีเมล

ปัญหาที่แท้จริงคือ:

HTML: เมื่อคุณรับค่าจาก $_POST['editor1'] แล้วนำไปสร้างเนื้อหาอีเมลในรูปแบบ HTML (ซึ่งเป็นรูปแบบทั่วไปสำหรับอีเมลส่วนใหญ่) ตัว HTML จะ ไม่แสดงการขึ้นบรรทัดใหม่ (\n) เป็นการขึ้นบรรทัดใหม่จริง ๆ แต่จะมองเป็นช่องว่าง (Space) ธรรมดา

ดังนั้น เมื่อคุณเปิดอีเมล คุณจะเห็นข้อความติดกันเป็นแถวยาวครับ

3. วิธีแก้ปัญหา: การแปลง `\n` เป็น `<br>`

วิธีแก้ที่ง่ายที่สุดคือการใช้ฟังก์ชันใน PHP เพื่อแปลงอักขระขึ้นบรรทัดใหม่ (\n) ให้เป็นแท็ก HTML สำหรับขึ้นบรรทัดใหม่ (<br>) ก่อนที่คุณจะนำไปใส่ในเนื้อหาอีเมล (ส่วนที่เป็น HTML) ครับ

คุณจะต้องแก้โค้ดในไฟล์ motor1.php ครับ:

โค้ดใน `motor1.php` (ที่ใช้ส่งอีเมล)

สมมติว่าคุณมีโค้ด PHP ใน motor1.php ที่รับค่าดังนี้:

PHP

<?php
// 1. รับค่าจากฟอร์ม
$name = $_POST['name'];
$tel = $_POST['tel'];
$email = $_POST['email'];
$editor_content = $_POST['editor1']; // นี่คือเนื้อหาจาก textarea

// 2. *** ขั้นตอนการแก้ไข: แปลงอักขระขึ้นบรรทัดใหม่ (\n) ให้เป็นแท็ก <br> ***
$email_body = nl2br(htmlspecialchars($editor_content));

// 3. สร้างเนื้อหาอีเมล
$message = "
    ชื่อ: {$name}<br>
    โทรศัพท์: {$tel}<br>
    อีเมล: {$email}<br><br>
    
    --- รายละเอียดที่กรอกในช่องข้อความหลัก ---<br>
    {$email_body}
";

// 4. ตั้งค่า Header และส่งอีเมล (ตัวอย่าง)
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
// ... (โค้ดส่งอีเมลของคุณ)
?>

htmlspecialchars($editor_content): อันดับแรก ควรใช้ฟังก์ชันนี้เพื่อ ป้องกัน XSS ที่อาจเกิดขึ้นถ้าผู้ใช้พยายามกรอกโค้ด HTML อันตรายใน <textarea> ธรรมดา
nl2br(...): นี่คือฟังก์ชัน PHP ที่สำคัญที่สุด โดยจะย่อมาจาก “New Line to Break” ซึ่งจะแปลงอักขระขึ้นบรรทัดใหม่ (\n หรือ \r\n) ทั้งหมดให้เป็นแท็ก <br /> หรือ <br> ใน HTML ทำให้เมื่ออีเมลแสดงผลแล้วจะมีการขึ้นบรรทัดใหม่อย่างถูกต้องครับ

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

รายละเอียด คอร์สสร้างเว็บไซต์

เวอไนน์เว็บไซต์⚡️

สร้างเว็บไซต์ ดูแลเว็บไซต์

เปลี่ยนจาก CKeditor เป็น form ธรรมดา เพียง <textarea> เดียว

โค้ดที่แนะนำ: ใช้ CKEditor 5 กับ <textarea> เดิม