ปรับแต่งแถบเครื่องมือโปรแกรมแก้ไข Rich-Text

หลังจากที่เพิ่มฟิลด์ข้อความขนาดใหญ่ไปยังประเภทข้อมูล และตั้งค่าลักษณะของโปรแกรมแก้ไข Rich-Text แล้ว คุณจะสามารถสร้างแถบเครื่องมือที่กำหนดเองได้

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

ในการปรับแต่งแถบเครื่องมือ ให้คลิกแท็บ JSON และแก้ไขคอนฟิเกอเรชัน JSON โดยใช้รูปแบบคำสั่ง CKEditor โปรดดู 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" - เลิกทำ/ทำซ้ำอินสแตนซ์ปัจจุบันในโปรแกรมแก้ไข

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

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

    • "list"

    • "indent"

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

  • "insert"

    • "image"

    • "table"

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

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

หมายเหตุ:

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

คุณสามารถใช้ "toolbarGroups" และ "removeButtons" หรือ "toolbar" สำหรับคุณสมบัติต่างๆ โปรดดูตัวอย่างทางด้านล่าง

ตัวอย่าง 2-1 ตัวเลือก 1: "toolbarGroups" และ "removeButtons"

{
"toolbarGroups": [
{"name": "basicstyles"}
,
{"name": "styles"}
,
{"name": "colors"}
,
{"name": "clipboard"}
,
"/",
{"name": "links"}
,
{"name": "insert"}
,
{"name": "paragraph","groups": ["list","indent"]}
,
{"name": "align"}
,
{"name": "undo"}
,
{"name": "cleanup"}
,
{"name": "mode"}
,
{"name": "tools"}
],
"removeButtons": "Styles,Subscript,Superscript,Anchor,Blockquote,PasteFromWord,Copy,Cut"
}

ตัวอย่าง 2-2 ตัวเลือก 2: "toolbar"

{
"toolbar" = [
{ "name":"basicstyles","items":["Bold","Italic","Underline","Strike","Subscript","Superscript","-","CopyFormatting","RemoveFormat"] }
,
{ "name":"paragraph","items":["NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl","Language"] }
,
{ "name":"links","items":["Link","Unlink","Anchor"] }
,
{ "name":"insert","items":["Image","Flash","Table","HorizontalRule","Smiley","SpecialChar","PageBreak","Iframe"] }
,
"/",
{ "name":"styles","items":["Styles","Format","Font","FontSize"] }
,
{ "name":"colors","items":["TextColor","BGColor"] }
,
{ "name":"tools","items":["Maximize","ShowBlocks"] }
,
{ "name":"about","items":["About"] }
]}