ปรับแต่งกลุ่มแถบเครื่องมือในตัวสร้างไซต์

สำหรับองค์ประกอบที่กำหนดเอง คุณสามารถปรับแต่งสำเนาของกลุ่มแถบเครื่องมือที่มาพร้อมกับผลิตภัณฑ์ซึ่งปรากฏในแถบเครื่องมือของตัวสร้างไซต์

คุณสามารถสร้างองค์ประกอบแบบพร้อมใช้งานในเวอร์ชันของคุณเอง ซึ่งมีชุดข้อมูลที่จำกัด และสามารถใช้ได้ในแท็กที่กำหนดเอง การปรับแต่งต่างๆ จะไม่มีผลกับองค์ประกอบที่มาพร้อมกับผลิตภัณฑ์

คุณสามารถสร้างองค์ประกอบแบบพร้อมใช้งานในเวอร์ชันของคุณเอง ซึ่งมีชุดข้อมูลที่จำกัด และสามารถใช้ได้ในแท็กที่กำหนดเอง แต่จะไม่มีผลกับองค์ประกอบที่มาพร้อมกับผลิตภัณฑ์

กลุ่มแถบเครื่องมือจะกำหนดสิ่งที่คุณเห็นในแถบเครื่องมือ เมื่อคุณคลิกที่องค์ประกอบ "ชื่อ" หรือ "ย่อหน้า" เพื่อแก้ไข คุณสามารถลบสิ่งที่องค์ประกอบ "ชื่อ" หรือ "ย่อหน้า" รองรับและจัดลำดับใหม่ แต่ไม่สามารถดำเนินการเช่นนี้กับปลั๊กอินเพิ่มเติม

ในการปรับแต่งกลุ่มแถบเครื่องมือในตัวสร้างไซต์ คุณต้องใช้รูปแบบคำสั่งเดียวกับการที่ CKEditor ใช้สำหรับคอนฟิเกอเรชันของ toolbarGroups โปรดดู https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

องค์ประกอบ 'ชื่อ' และ 'ย่อหน้า' รองรับกลุ่มต่อไปนี้

  • "basicstyles" - จำกัดเฉพาะตัวหนา/ตัวเอียง/ขีดเส้นใต้ https://ckeditor.com/cke4/addon/basicstyles

  • "styles" - สไตล์แบบอักษร https://docs.ckeditor.com/ckeditor4/latest/guide/dev_styles.html

  • "colors" - ข้อความและสีพื้นหลัง https://docs.ckeditor.com/ckeditor4/latest/guide/dev_colorbutton.html

  • "undo" - เลิกทำ/ทำซ้ำอินสแตนซ์ปัจจุบันใน CKEditor

  • "links" - ปลั๊กอินที่กำหนดเองไปยังไดอะล็อกการลิงค์

  • "paragraph" - รองรับลิสต์แบบมีสัญลักษณ์/ตัวเลขนำหน้า และการย่อหน้า

    • "list"

    • "indent"

  • "align" - ซ้าย/ขวา/กลาง

  • "cleanup" - ย้ายสไตล์ทั้งหมดออกสำหรับข้อความที่เลือก

นอกจากนี้ องค์ประกอบ "ย่อหน้า" ยังรองรับปลั๊กอินการแทรกรูปภาพและตาราง”

  • "insert"

    • "image"

    • "table"

นอกจากนี้ คุณยังสามารถใช้สัญลักษณ์คั่นแถวได้ด้วย:

  • "/"

หมายเหตุ:

หากคุณตั้งค่าอื่นไว้ในคอนฟิเกอเรชันกลุ่มแถบเครื่องมือ ค่าดังกล่าวจะถูกย้ายออกก่อนที่จะสร้างแถบเครื่องมือตัวสร้างไซต์ คุณไม่สามารถระบุ "extraPlugins" ได้ ระบบรองรับเฉพาะคอนฟิเกอเรชัน "name"/"groups" เท่านั้น ระบบจะไม่ประมวลผลรายการ "items" 

ตัวอย่างเช่น ถ้าคุณต้องการป้องกันไม่ให้ผู้ใช้กำหนดแบบอักษร สไตล์ หรือขนาด คุณสามารถอัปเดตคอนฟิเกอเรชันของแถบเครื่องมือดังนี้ สำหรับค่า "id" คุณต้องระบุค่าที่กำหนดเองซึ่งต่างจากค่าที่มาพร้อมกับผลิตภัณฑ์

[{
    "name": "<category name>",
    "list": [{
        "type": "scs-title",
        "id": "<custom-value>",
        "config": {
            "toolbarGroups": [{
                    "name": "basicstyles",
                    "groups": ["basicstyles"]
                }, {
                    "name": "undo",
                    "groups": ["undo"]
                },
                "/", {
                    "name": "links",
                    "groups": ["links"]
                }, {
                    "name": "paragraph",
                    "groups": ["list", "indent"]
                },
                "/", {
                    "name": "align",
                    "groups": ["align"]
                },
                {
                    "name": "insert",
                    "groups": ["image", "table"]
                }, {
                    "name": "cleanup",
                    "groups": ["cleanup"]
                }
            ]
        }
    }, {
        "type": "scs-paragraph",
        "id": "<custom-value>",
        "config": {
            "fontSize_sizes": "16/16px;24/24px;48/48px;"
        }
    }]
}]

การตรวจสอบความถูกต้อง

แทนที่ไฟล์ components.json ด้วยรหัสนำหน้า จากนั้นแก้ไขไซต์ของคุณ (รีเฟรชเบราเซอร์ถ้าคุณกำลังแก้ไขอยู่) ในขั้นตอนนี้ เมื่อคุณแก้ไของค์ประกอบ "ชื่อ" ระบบจะไม่แสดงสไตล์หรือสีของแบบอักษรให้เลือก องค์ประกอบ "ย่อหน้า" จะยังแสดงข้อมูลเกล่านี้อยู่ และลิสต์ของขนาดตัวอักษรที่ใช้ได้จะจำกัดอยู่ที่ 16, 24 และ 48

กลุ่มแถบเครื่องมือดีฟอลต์

กลุ่มแถบเครื่องมือดีฟอลต์สำหรับ 'ชื่อ' และ 'ย่อหน้า' มีดังนี้

  • ชื่อ

    [{
        "name": "basicstyles",
        "groups": ["basicstyles"]
    }, {
        "name": "styles",
        "groups": ["styles"]
    }, {
        "name": "colors",
        "groups": ["colors"]
    }, {
        "name": "undo",
        "groups": ["undo"]
    },
    "/", {
        "name": "links",
        "groups": ["links"]
    }, {
        "name": "paragraph",
        "groups": ["list", "indent"]
    }, {
        "name": "align",
        "groups": ["align"]
    }, {
        "name": "cleanup",
        "groups": ["cleanup"]
    }
]

  • ย่อหน้า

    [{
        "name": "basicstyles",
        "groups": ["basicstyles"]
    }, {
        "name": "styles",
        "groups": ["styles"]
    }, {
        "name": "colors",
        "groups": ["colors"]
    }, {
        "name": "undo",
        "groups": ["undo"]
    },
    "/", {
        "name": "links",
        "groups": ["links"]
    }, {
        "name": "paragraph",
        "groups": ["list", "indent"]
    }, {
        "name": "align",
        "groups": ["align"]
    }, {
        "name": "insert",
        "groups": ["image", "table"]
    }, {
        "name": "cleanup",
        "groups": ["cleanup"]
    }
]