เพิ่มตัวควบคุม ตัวแก้ไข Rich Text ให้กับแอปแบบจำลอง

บทความ
04/23/2024

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

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

ภาพหน้าจอของตัวแก้ไข Rich Text เริ่มต้นในแอปแบบจำลอง

ปัจจุบันตัวแก้ไข Rich Text มีให้บริการในสองประสบการณ์ใช้งานที่แตกต่างกัน:

ตัวแก้ไขข้อความสมัยใหม่: ประสบการณ์ใหม่ที่คุณเปิดใช้งานได้
ตัวแก้ไขข้อความแบบคลาสสิก: ประสบการณ์เริ่มต้น

การปรับปรุงตัวแก้ไขข้อความสมัยใหม่

ตัวแก้ไขข้อความสมัยใหม่ได้รับการออกแบบให้สอดคล้องกับอินเทอร์เฟซที่คุ้นเคยและใช้งานง่ายของแอปพลิเคชัน Microsoft เช่น Outlook, Word และ OneNote การอัปเดตนี้มาพร้อมออกแบบสมัยใหม่ โหมดมืด ธีมที่มีคอนทราสต์สูง และคุณลักษณะ Copilot ใหม่เพื่อปรับปรุงความสามารถในการแก้ไขข้อความของคุณ

หมายเหตุ

ฟังก์ชันการทำงานบางอย่างที่มีอยู่ในประสบการณ์การใช้งานตัวแก้ไข Rich Text แบบคลาสสิกยังไม่พร้อมใช้งานในประสบการณ์การใช้งานสมัยใหม่ ฟังก์ชันดังกล่าวได้แก่:

ตัวเลือกการกำหนดค่าตามที่อธิบายไว้ในบทความนี้สำหรับประสบการณ์แบบคลาสสิก
อ้างถึง

เปิดใช้งานประสบการณ์ใช้งานตัวแก้ไข Rich Text สมัยใหม่

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

ใน Dynamics 365 คลิกขวาที่แอปที่คุณต้องการเปิดใช้งานประสบการณ์ใช้งานตัวแก้ไข Rich Text ที่ทันสมัย จากนั้นเลือก เปิดในตัวออกแบบแอป Power Apps เปิดตัวออกแบบแอป
บนแถบคำสั่ง เลือก การตั้งค่า หน้าการตั้งค่าจะปรากฏขึ้น
ในบานหน้าต่างใน การตั้งค่า ให้เลือก คุณลักษณะ หน้าคุณลักษณะจะปรากฏขึ้น
ตั้งค่าปุ่มสลับเป็น ใช่ สำหรับตัวเลือกใดๆ หรือทั้งหมดต่อไปนี้ โดยขึ้นอยู่กับความต้องการของคุณ:
- เปิดใช้งานประสบการณ์ใช้งานตัวควบคุม RichTextEditor สมัยใหม่และคำอธิบายอีเมล: เปิดใช้งานประสบการณ์ใช้งานตัวควบคุมตัวแก้ไข RichTextEditor สมัยใหม่สำหรับคำอธิบายอีเมล การตั้งค่านี้จะแทนที่การปรับแต่งใดๆ ที่คุณทำไว้ก่อนหน้านี้กับประสบการณ์อีเมลแบบคลาสสิก (ค่าเริ่มต้น) ของตัวแก้ไข Rich Text
- เปิดใช้งานประสบการณ์ใช้งานตัวควบคุม RichTextEditor สมัยใหม่สำหรับตัวควบคุมเริ่มต้น: เปิดใช้งานประสบการณ์ใช้งานตัวแก้ไข RichTextEditor สมัยใหม่สำหรับอินสแตนซ์เริ่มต้นที่ไม่ได้กำหนดค่าไว้
- เปิดใช้งานประสบการณ์ใช้งานตัวควบคุม RichTextEditor สมัยใหม่สำหรับการเขียนบันทึกย่อ: เปิดใช้งานประสบการณ์ใช้งานตัวแก้ไข RichTextEditor สมัยใหม่สำหรับบันทึกย่อ การตั้งค่านี้จะแทนที่การปรับแต่งใดๆ ที่คุณทำไว้ก่อนหน้านี้กับประสบการณ์การเขียนบันทึกย่อแบบคลาสสิก (ค่าเริ่มต้น) ของตัวแก้ไข Rich Text
เลือก บันทึก
ในตัวออกแบบแอป เลือก เผยแพร่

เปลี่ยนกลับจากประสบการณ์ใช้งานตัวแก้ไขข้อความแบบ Rich Text สมัยใหม่ไปเป็นประสบการณ์แบบคลาสสิก

หากคุณต้องการเปลี่ยนกลับไปใช้ตัวแก้ไข Rich Text แบบคลาสสิก ให้ทำตามขั้นตอนเดียวกันใน เปิดใช้งานประสบการณ์ใช้งานตัวแก้ไข Rich Text สมัยใหม่ แต่ยกเลิกการเลือกตัวเลือกที่คุณเลือกในขั้นตอนที่ 4

เพิ่มตัวควบคุมตัวแก้ไข Rich Text ให้กับคอลัมน์ข้อความ

การกำหนดค่าต่อไปนี้สามารถใช้งานได้ในประสบการณ์ใช้งานตัวแก้ไข Rich Text แบบคลาสสิก

เมื่อคุณจัดรูปแบบคอลัมน์ข้อความเป็น Rich Text ตัวควบคุมตัวแก้ไข Rich Text เริ่มต้นจะถูกเพิ่มโดยอัตโนมัติ

ลงชื่อเข้าใช้ Power Apps
ในบานหน้าต่างนำทางด้านซ้าย เลือก โซลูชัน
เปิดโซลูชันและตารางในโซลูชัน
ในพื้นที่ คอลัมน์และข้อมูล ให้เลือกคอลัมน์ข้อความ

ถ้าตารางไม่มีคอลัมน์ข้อความ ให้เลือก + (คอลัมน์ใหม่) และป้อนชื่อให้กับคอลัมน์
ใน ชนิดข้อมูล เลือก > ทางด้านขวาของ ข้อความ แล้วเลือกตัวเลือก Rich Text ที่เหมาะสม ขึ้นอยู่กับว่าคอลัมน์มีข้อความบรรทัดเดียวหรือหลายบรรทัด
บันทึกคอลัมน์ แล้วเพิ่มลงในฟอร์ม

เพิ่มตัวควบคุมตัวแก้ไข Rich Text ให้กับคอลัมน์ข้อความในฟอร์ม

ลงชื่อเข้าใช้ Power Apps
ในบานหน้าต่างนำทางด้านซ้าย เลือก โซลูชัน
เปิดโซลูชันและตารางในโซลูชัน
ในพื้นที่ ประสบการณ์ข้อมูล ให้เลือก ฟอร์ม แล้วค้นหาฟอร์มที่มีคอลัมน์ข้อความที่คุณต้องการเพิ่มตัวแก้ไข Rich Text ลงไป
เลือก ⋮ > แก้ไข > แก้ไขในแท็บใหม่
บนพื้นที่ทำงานตัวออกแบบฟอร์ม ให้เลือก เพิ่ม หรือสร้างคอลัมน์ข้อความ
ในบานหน้าต่างคุณสมบัติคอลัมน์ ให้ขยายรายการ ส่วนประกอบ เลือก + ส่วนประกอบ แล้วเลือก ตัวควบคุมตัวแก้ไข Rich Text
ในบานหน้าต่าง เพิ่มตัวควบคุมตัวแก้ไข Rich Text ให้เลือก เว็บ, โทรศัพท์ และ แท็บเล็ต เพื่ออนุญาตให้แอปที่ทำงานบนอุปกรณ์ใดๆ สามารถใช้ตัวแก้ไขได้

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

ปรับแต่งตัวควบคุมตัวแก้ไข Rich Text

การปรับแต่งต่อไปนี้สามารถใช้งานได้ในประสบการณ์ใช้งานตัวแก้ไข Rich Text แบบคลาสสิก

Power Apps ช่วยให้คุณสามารถเปลี่ยนคุณสมบัติของตัวควบคุมตัวแก้ไข Rich Text เพื่อปรับแต่งลักษณะที่ปรากฏ คุณลักษณะ และลักษณะการทำงานได้ ในการ ปรับแต่งอินสแตนซ์เฉพาะของตัวควบคุม ให้ระบุคุณสมบัติและค่าในไฟล์การกำหนดค่าที่จัดรูปแบบ JSON แต่ละไฟล์ ในการ ปรับแต่งการกำหนดค่าส่วนกลางของตัวควบคุม ให้เปลี่ยนคุณสมบัติในไฟล์การกำหนดค่าเริ่มต้น

ระดับของการปรับแต่ง

การกำหนดค่าที่นำไปใช้ในการปรับแต่งตัวแก้ไข Rich Text มีได้สูงสุดสามระดับหรือเลเยอร์:

ในระดับพื้นฐานที่สุด ทุกอินสแตนซ์ของตัวควบคุมจะใช้การกำหนดค่าจากไฟล์ RTEGlobalConfiguration_Readonly.json ไฟล์เป็นแบบอ่านอย่างเดียว ดังนั้นคุณจึงไม่สามารถเปลี่ยนคุณสมบัติเหล่านี้ได้โดยตรง
ในระดับถัดไป ทุกอินสแตนซ์ของตัวควบคุมจะใช้การกำหนดค่าจากคุณสมบัติในไฟล์ RTEGlobalConfiguration.json ถ้ามีอยู่ การกำหนดค่านี้ซ้อนอยู่ด้านบนของการกำหนดค่าก่อนหน้า ดังนั้นคุณสมบัติในไฟล์นี้จะ แทนที่ คุณสมบัติที่มีชื่อเดียวกันในไฟล์แบบอ่านอย่างเดียว
สุดท้าย ที่ระดับสูงสุด อินสแตนซ์เฉพาะของตัวควบคุมจะใช้การกำหนดค่าจากไฟล์การกำหนดค่าเฉพาะ ถ้ามี การกำหนดค่านี้ซ้อนอยู่ด้านบนของการกำหนดค่าก่อนหน้า ดังนั้นคุณสมบัติในไฟล์นี้จะ แทนที่ คุณสมบัติที่มีชื่อเดียวกันในไฟล์สองระดับที่ต่ำกว่า

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

ปรับแต่งอินสแตนซ์เฉพาะของตัวแก้ไข Rich Text

ใน Visual Studio Code หรือตัวแก้ไขข้อความอื่นๆ ให้สร้างไฟล์และตั้งชื่อที่มีความหมาย

ไฟล์ RTEGlobalConfiguration.json มีการกำหนดค่าเริ่มต้นหรือส่วนกลางของตัวแก้ไข Rich Text หากคุณกำลังปรับแต่งตัวควบคุมในฟอร์มการติดต่อ คุณอาจตั้งชื่อไฟล์ดังนี้ RTEContactFormConfiguration.json
คัดลอกและวางส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์:
```
{
"defaultSupportedProps": {
  "propertyName": "value",
  "propertyName": "value",
  "propertyName": "value"
},
}
```
คู่ propertyName:value สุดท้ายไม่ได้ลงท้ายด้วยเครื่องหมายจุลภาค
แทนที่ propertyName และ value ด้วย คุณสมบัติตัวควบคุมตัวแก้ไข Rich Text ที่คุณต้องการเปลี่ยนแปลง ค่าสตริงต้องอยู่ในเครื่องหมายคำพูด

เราได้จัดเตรียม ตัวอย่างการกำหนดค่า ไว้ให้คุณแล้ว แต่คุณสามารถกำหนดการกำหนดค่าอื่นๆ ให้เหมาะกับความต้องการของคุณ
ใน Power Apps สร้างทรัพยากรบนเว็บชนิด JavaScript (JS) โดยใช้ไฟล์ JSON ที่คุณสร้างในขั้นตอนที่ 1
เพิ่มตัวควบคุมตัวแก้ไข Rich Text ให้กับคอลัมน์ข้อความในฟอร์ม และในบานหน้าต่าง เพิ่มตัวควบคุมตัวแก้ไข Rich Text > ค่าคงที่ ให้ป้อน URL แบบย่อของทรัพยากรบนเว็บ JavaScript

แม้ว่าคุณอาจป้อน URL แบบเต็มของทรัพยากรบนเว็บ เราขอแนะนำให้คุณป้อน URL แบบย่อ ด้วยวิธีนี้ ทรัพยากรบนเว็บยังคงใช้งานได้ หากคุณนำเข้าเป็นโซลูชันลงในสภาพแวดล้อมอื่นโดยมีเงื่อนไขว่าพาธแบบย่อจะเหมือนกัน

ตัวอย่างเช่น หาก URL ของทรัพยากรบนเว็บคือ https://yourorg.crm.dynamics.com/WebResources/rtecontactform URL แบบย่อคือ /WebResources/rtecontactform
เลือก เสร็จ
เลือก บันทึกและเผยแพร่ เพื่อใช้การเปลี่ยนแปลงของคุณกับฟอร์ม

ปรับแต่งตัวแก้ไข Rich Text โดยรวม

ไฟล์การกำหนดค่าส่วนกลางที่แก้ไขได้ RTEGlobalConfiguration.json เป็น การปรับแต่งระดับที่สอง ที่คุณสามารถใช้ได้ ตามค่าเริ่มต้น ไฟล์จะไม่มีข้อมูลใดๆ ซึ่งหมายความว่าอินสแตนซ์ทั้งหมดของตัวแก้ไข Rich Text ใช้คุณสมบัติในไฟล์แบบอ่านอย่างเดียว RTEGlobalConfiguration_Readonly.json เว้นแต่คุณจะ สร้างไฟล์การกำหนดค่า สำหรับอินสแตนซ์เฉพาะของตัวควบคุม

หากความต้องการทางธุรกิจของคุณต้องการให้คุณปรับแต่งตัวควบคุมทุกที่ ให้ระบุค่าที่คุณต้องการในไฟล์ RTEGlobalConfiguration.json ใช้ไฟล์แบบอ่านอย่างเดียวเป็นตัวอย่างเพื่อให้แน่ใจว่าคุณป้อนคู่คุณสมบัติ-ค่าในรูปแบบที่ถูกต้อง

ใช้ Copilot ในเพื่อแก้ไขข้อความในตัวแก้ไข

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

คุณสมบัติตัวแก้ไข Rich Text

ไฟล์ JSON ที่กำหนด "รูปลักษณ์" ของอินสแตนซ์ของตัวแก้ไข Rich Text มีคุณสมบัติสองชุด:

ส่วน defaultSupportedProps มีคุณสมบัติของปลั๊กอินที่กำหนดสิ่งที่ตัวควบคุมสามารถทำได้ คุณไม่ได้ถูกจำกัดเฉพาะคุณสมบัติของ CKEditor และปลั๊กอิน คุณยังสามารถตั้งค่าคุณสมบัติของปลั๊กอินเพิ่มเติมที่คุณเพิ่มหรือสร้างได้ด้วย
ส่วนคุณสมบัติเฉพาะ มีคุณสมบัติที่กำหนดว่าตัวควบคุมมีลักษณะอย่างไร

ไฟล์การกำหนดค่าตัวอย่าง

โค้ดต่อไปนี้เป็นตัวอย่างของไฟล์ JSON ที่มีทั้งคุณสมบัติ defaultSupportedProps และ คุณสมบัติการกำหนดค่าเฉพาะ หากคุณสมบัติมีค่าเริ่มต้น ค่าเริ่มต้นจะแสดงขึ้น หากคุณสมบัติไม่มีค่าเริ่มต้น ระบบจะแสดงค่าตัวอย่างเพื่อแสดงไวยากรณ์ คุณสมบัติมีการอธิบายไว้ในสองตารางต่อไปนี้

"defaultSupportedProps": {
  "height": 185,
  "stickyStyle": {
    "font-size": "9pt",
    "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
  },
  "stickyStyles_defaultTag": "div",
  "font_defaultLabel": "Segoe UI",
  "fontSize_defaultLabel": "9",
  "toolbarLocation": "bottom",
  "toolbar": [
  [ "CopyFormatting" ],
  [ "Font" ],
  [ "FontSize" ],
  [ "Bold" ],
  [ "Italic" ],
  [ "Underline" ],
  [ "BGColor" ],
  [ "TextColor" ],
  [ "BulletedList" ],
  [ "NumberedList" ],
  [ "Outdent" ],
  [ "Indent" ],
  [ "Blockquote" ],
  [ "JustifyLeft" ],
  [ "JustifyCenter" ],
  [ "JustifyRight" ],
  [ "Link" ],
  [ "Unlink" ],
  [ "Subscript" ],
  [ "Superscript" ],
  [ "Strike" ],
  [ "Image" ],
  [ "BidiLtr" ],
  [ "BidiRtl" ],
  [ "Undo" ],
  [ "Redo" ],
  [ "RemoveFormat" ],
  [ "Table" ]
 ],
  "plugins": [["button,toolbar,dialogui,dialog,autogrow,notification,clipboard,textmatch,fakeobjects,link,autolink,basicstyles,bidi,blockquote,panelbutton,panel,floatpanel,colorbutton,colordialog,listblock,richcombo,menu,contextmenu,copyformatting,enterkey,entities,popup,find,floatingspace,font,format,htmlwriter,horizontalrule,indent,indentblock,indentlist,justify,lineutils,openlink,list,liststyle,maximize,undo,menubutton,notificationaggregator,xml,ajax,pastetools,pastefromword,pastetext,preview,table,quicktable,removeformat,resize,selectall,showborders,sourcearea,specialchar,stylescombo,tab,tabletools,tableresize,tableselection,widgetselection,widget,wysiwygarea,textwatcher"]],
  "extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,bidi,blockquote,button,collapser,colorbutton,colordialog,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,filebrowser,filetools,find,floatpanel,font,iframerestrictor,indentblock,justify,notification,panel,panelbutton,pastefromword,quicktable,selectall,stickystyles,superimage,tableresize,tableselection,tabletools,uploadfile,uploadimage,uploadwidget",
  "removePlugins": "a11yhelp,codemirror,magicline,scayt,showborders",
  "superimageImageMaxSize": 5,
  "disallowedContent": "form[action]; *[formaction]; script; *[on*]",
  "linkTargets": ["notSet", "_blank"],
},
"attachmentEntity": {
  "name": "msdyn_richtextfiles",
  "fileAttributeName": "msdyn_fileblob"
},
"disableContentSanitization": true,
"disableDefaultImageProcessing": false,
"disableImages": false,
"externalPlugins": [
  {
    "name": "EmbedMedia",
    "path": "/WebResources/msdyncrm_/myplugins/embedmedia/"
  }
],
"imageEntity": {
  "imageEntityName": "msdyn_richtextfiles",
  "imageFileAttributeName": "msdyn_imageblob"
},
"readOnlySettings": {
  "height": 500,
  "showFullScreenExpander": true
},
"sanitizerAllowlist": {
  "attributes": [],
  "cssProperties": [],
  "domains": [],
  "protocols": [],
  "tags": []
},
"showAsTabControl": false,
"showFullScreenExpander": false,
"showHtml": false,
"showPreview": false,
"showPreviewHeaderWarning": false,
"allowSameOriginSandbox": false

defaultSupportedProps

ตารางต่อไปนี้อธิบายคุณสมบัติที่ใช้บ่อยที่สุด แต่คุณสามารถกำหนดค่า คุณสมบัติที่ CKEditor รองรับ ทั้งหมดได้ ตัวควบคุมตัวแก้ไข Rich Text ใช้ CKEditor 4

คุณสมบัติ	รายละเอียด	Default value
ความสูง	ตั้งค่าความสูงเริ่มต้นของพื้นที่เนื้อหาเป็นพิกเซล	"185"
stickyStyle	ตั้งค่าขนาดและแบบอักษรของตัวแก้ไข	ดูที่ defaultSupportedProps
stickyStyles_defaultTag	สร้างแรปเปอร์รอบข้อความในพื้นที่เนื้อหาของตัวแก้ไข ในตอนแรกถูกตั้งค่าเป็น "div" แต่คุณสามารถเปลี่ยนเป็น "p" หรือแท็กอื่นได้	"div"
font_defaultLabel	ตั้งค่าป้ายชื่อแบบอักษรที่แสดงในแถบเครื่องมือ ป้ายชื่อมีไว้สำหรับลักษณะที่ปรากฏเท่านั้นและไม่สามารถใช้งานได้ คุณสมบัติ `stickyStyle` กำหนดแบบอักษรและขนาดของตัวแก้ไข	"Segoe UI"
fontSize_defaultLabel	ตั้งค่าป้ายชื่อขนาดแบบอักษรที่แสดงในแถบเครื่องมือ ป้ายชื่อมีไว้สำหรับลักษณะที่ปรากฏเท่านั้นและไม่สามารถใช้งานได้ คุณสมบัติ `stickyStyle` กำหนดแบบอักษรและขนาดของตัวแก้ไข	"9"
toolbarLocation	ตั้งค่าตำแหน่งของแถบเครื่องมือในพื้นที่เนื้อหาของตัวแก้ไข ค่าที่รองรับคือ "ด้านบน" และ "ด้านล่าง"	"ด้านล่าง"
แถบเครื่องมือ	แสดงรายการปุ่มแถบเครื่องมือที่จะแสดง	ดูที่ defaultSupportedProps
ปลั๊กอิน	แสดงรายการปลั๊กอินที่กำหนดไว้ล่วงหน้าที่ตัวแก้ไขสามารถใช้ได้ ปลั๊กอินในรายการนี้อาจแตกต่างจากปลั๊กอินที่โหลดหาก `extraPlugins` และ `removePlugins` ได้รับการกำหนดค่า หากคุณตั้งค่าคุณสมบัตินี้เป็นสตริงว่าง ตัวแก้ไขโหลดโดยไม่มีแถบเครื่องมือ	ดูที่ defaultSupportedProps
extraPlugins	เพิ่มปลั๊กอินที่รายการ `plugins` เพื่อโหลดปลั๊กอินเพิ่มเติม ปลั๊กอินจำนวนมากต้องการปลั๊กอินอื่นในการทำงาน ตัวแก้ไข Rich Text จะเพิ่มปลั๊กอินเหล่านี้โดยอัตโนมัติ และคุณไม่สามารถใช้คุณสมบัตินี้เพื่อแทนที่ได้ ใช้ `removePlugins` แทน	ดูที่ defaultSupportedProps
removePlugins	แสดงรายการปลั๊กอินที่จะไม่โหลด ใช้เพื่อเปลี่ยนปลั๊กอินที่จะโหลดโดยไม่ต้องเปลี่ยนรายการ `plugins` และ `extraPlugins`	ดูที่ defaultSupportedProps
superimageImageMaxSize	ตั้งค่าขนาดสูงสุดเป็นเมกะไบต์ (MB) ที่อนุญาตสำหรับภาพที่ฝังเมื่อใช้ปลั๊กอินภาพซ้อนทับ	"5"
disallowedContent	ให้คุณสามารถป้องกันผู้ใช้จากการแทรกองค์ประกอบที่คุณไม่ต้องการให้มีในเนื้อหาของคุณ คุณสามารถไม่อนุญาตองค์ประกอบทั้งหมดหรือตามแอตทริบิวต์ คลาส และลักษณะ	ดูที่ defaultSupportedProps
linkTargets	ให้คุณสามารถกำหนดค่าตัวเลือกเป้าหมายลิงก์ที่ผู้ใช้จะใช้งานได้เมื่อสร้างลิงก์: - "notSet": ไม่ได้กำหนดเป้าหมาย - "frame": เปิดเอกสารในกรอบที่ระบุ - popupWindow": เปิดเอกสารในหน้าต่างป็อปอัพ - "_blank": เปิดเอกสารในหน้าต่างหรือแท็บใหม่ - "_top": เปิดเอกสารแบบเนื้อความแบบเต็มของหน้าต่าง - "_self": เปิดเอกสารในหน้าต่างหรือแท็บเดียวกับที่เปิดใช้งานลิงก์ - "_parent": เปิดเอกสารในกรอบหลัก	"notSet", "_blank"

คุณสมบัติเฉพาะ

ตารางต่อไปนี้อธิบายคุณสมบัติเพิ่มเติมที่คุณสามารถใช้เพื่อกำหนดตัวควบคุมตัวแก้ไข Rich Text

คุณสมบัติ	รายละเอียด	Default value
attachmentEntity	หากต้องการเพิ่มความปลอดภัยสำหรับ ไฟล์ที่อัปโหลด โดยใช้ตารางอื่นนอกเหนือจากค่าเริ่มต้น ให้ตั้งค่าคุณสมบัตินี้และระบุตารางอื่น ไวยากรณ์: "name": "tableName", "fileAttributeName": "attributeNameofBlobReference"	ดูที่ defaultSupportedProps
disableContentSanitization	การล้างเนื้อหาจะลบแอตทริบิวต์หรือแท็กที่กำหนดเองบางส่วนออกจากเนื้อหา Rich Text ตามค่าเริ่มต้นจะถูกปิดใช้งานเพื่อให้สามารถคัดลอกและวางเนื้อหา Rich Text จากแหล่งภายนอกได้ คุณสมบัตินี้ใช้กับโหมดแก้ไขเท่านั้น เมื่อตัวควบคุมตัวแก้ไขเป็นแบบอ่านอย่างเดียวหรือปิดใช้งาน เนื้อหาจะถูกปรับให้เหมาะสมอยู่เสมอ	จริง
disableDefaultImageProcessing	ตามค่าเริ่มต้น รูปภาพที่แทรกในตัวแก้ไขจะถูกอัปโหลดไปยัง `attachmentEntity` ที่กำหนดไว้ในการกำหนดค่า ผู้ใช้ภายนอกอาจไม่มีสิทธิ์ในการดูเนื้อหาในตาราง ให้ตั้งค่าคุณสมบัตินี้เป็นจริงเพื่อจัดเก็บรูปภาพเป็นสตริง base64 โดยตรงในคอลัมน์ที่กำหนดค่าให้ใช้ตัวควบคุมตัวแก้ไข Rich Text	เท็จ
disableImages	กำหนดว่าสามารถแทรกรูปภาพในตัวแก้ไขได้หรือไม่ คุณสมบัตินี้มีลำดับความสำคัญสูงสุด เมื่อคุณสมบัตินี้ถูกตั้งค่าเป็น จริง รูปภาพจะถูกปิดใช้งาน โดยไม่คำนึงถึงค่าของคุณสมบัติ `imageEntity`	เท็จ
externalPlugins	แสดงรายการปลั๊กอินภายนอกหรือปลั๊กอินที่คุณสร้างซึ่งสามารถใช้ในตัวควบคุมตัวแก้ไข Rich Text ไวยากรณ์: "name": "pluginName", "path": "pathToPlugin" (ค่าพาธอาจเป็น URL แบบเต็มหรือแบบย่อ)	ไม่มี; ดูที่ defaultSupportedProps สำหรับตัวอย่าง
imageEntity	หากต้องการเพิ่มความปลอดภัยสำหรับ รูปภาพ โดยใช้ตารางอื่นนอกเหนือจากค่าเริ่มต้น ให้ตั้งค่าคุณสมบัตินี้และระบุตารางอื่น ไวยากรณ์: "imageEntityName": "tableName", "imageFileAttributeName": "attributeNameofBlobReference"	ดูที่ defaultSupportedProps
readOnlySettings	คุณสมบัติเหล่านี้จะกำหนดลักษณะการทำงานของคอลัมน์เมื่อดูในสถานะอ่านอย่างเดียวหรือปิดใช้งาน คุณสามารถระบุคุณสมบัติใดๆ ที่รองรับได้	ไม่มี; ดูที่ defaultSupportedProps สำหรับตัวอย่าง
sanitizerAllowlist	แสดงรายการเนื้อหาประเภทอื่นๆ ที่สามารถแสดงในตัวแก้ไขได้	ดูที่ defaultSupportedProps
showAsTabControl	ช่วยให้คุณแสดงคำสั่งเพิ่มเติมเหนือพื้นที่เนื้อหาได้ ต้องตั้งค่าเป็นจริงเพื่อใช้คุณสมบัติต่อไปนี้: `showFullScreenExpander`, `showHtml`, `showPreview`, `showPreviewHeaderWarning`	เท็จ
showFullScreenExpander	กำหนดว่าสามารถใช้ตัวแก้ไขในโหมดเต็มหน้าจอได้หรือไม่ `showAsTabControl` ต้องตั้งค่าเป็นจริง	เท็จ
showHtml	อนุญาตให้ผู้ใช้แสดงและแก้ไขเนื้อหา HTML ได้โดยตรง `showAsTabControl` ต้องตั้งค่าเป็นจริง	เท็จ
showPreview	อนุญาตให้ผู้ใช้ดูตัวอย่างเนื้อหาของตัวแก้ไขที่แสดงผลเป็น HTML `showAsTabControl` ต้องตั้งค่าเป็นจริง	เท็จ
showPreviewHeaderWarning	ช่วยให้คุณแสดงหรือซ่อนข้อความเตือนที่แสดงเมื่อดูตัวอย่างเนื้อหา `showAsTabControl` และ `showPreview` ต้องตั้งค่าเป็นจริง	เท็จ
allowSameOriginSandbox	อนุญาตให้เนื้อหาในตัวแก้ไขได้รับการปฏิบัติเหมือนมาจากแหล่งที่มาเดียวกันกับแอปการแสดงภาพ ใช้คุณสมบัตินี้ด้วยความระมัดระวัง ใช้เนื้อหาภายนอกที่เชื่อถือได้เท่านั้น เมื่อคุณสมบัตินี้ตั้งค่าเป็นจริง เนื้อหาภายนอกใดๆ จะสามารถเข้าถึงทรัพยากรภายในได้	เท็จ

การกำหนดค่าตัวอย่าง

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

ตั้งค่าแบบอักษรเริ่มต้นเป็น Calibri 11 พอยต์

ตั้งค่า คุณสมบัติ defaultSupportedProps เหล่านี้ใน ไฟล์การกำหนดค่า ของคุณ แต่ละค่ายกเว้นค่าสุดท้ายควรตามด้วยเครื่องหมายจุลภาค (,)

"font_defaultLabel": "Calibri",
"fontSize_defaultLabel": "11",
"stickyStyle": {
  "font-size": "11pt",
  "font-family": "Calibri/Calibri, Helvetica, sans-serif;"
},

ทำให้ปุ่ม Enter แทรกบรรทัดใหม่แทนบล็อกย่อหน้า

ตามค่าเริ่มต้น การกดปุ่ม Enter จะสร้างบล็อกย่อหน้าที่มีแท็ก HTML <p> HTML ใช้บล็อกย่อหน้าเพื่อจัดกลุ่มข้อมูล เช่น ย่อหน้าในเอกสาร Word เบราว์เซอร์สามารถจัดรูปแบบแท็ก <p> ให้แตกต่างออกไปเล็กน้อย ดังนั้นเพื่อให้เห็นภาพสอดคล้องกัน คุณอาจต้องการใช้แท็กขึ้นบรรทัดใหม่หรือแท็กตัวแบ่งบรรทัด <br\> แทน

ตั้งค่า คุณสมบัติ defaultSupportedProps นี้ใน ไฟล์การกำหนดค่า ของคุณ ระบุเครื่องหมายจุลภาค (,) หลังค่านี้เว้นแต่จะเป็นคุณสมบัติสุดท้ายในไฟล์

"enterMode": 2,

วางหรือสร้างเนื้อหา HTML 5 เท่านั้น

แม้ว่าตัวควบคุมตัวแก้ไข Rich Text ทำงานได้ดีที่สุดกับเนื้อหา HTML 5 แต่คุณสามารถใช้แท็ก HTML 4 ได้ อย่างไรก็ตาม ในบางกรณี การผสมแท็ก HTML 4 และ HTML 5 อาจสร้างความท้าทายด้านการใช้งานได้ ตรวจสอบให้แน่ใจว่าเนื้อหาทั้งหมดเป็น HTML 5 ระบุแท็ก HTML 5 ที่รองรับทั้งหมดในคุณสมบัติ allowedContent ตัวควบคุมตัวแก้ไขจะแปลงแท็กที่ไม่เป็นไปตามข้อกำหนดเป็นค่าเทียบเท่า HTML 5

"allowedContent": "a(*)[*]{*};abbr(*)[*]{*};address(*)[*]{*};area(*)[*]{*};article(*)[*]{*};aside(*)[*]{*};audio(*)[*]{*};b(*)[*]{*};base(*)[*]{*};bdi(*)[*]{*};bdo(*)[*]{*};blockquote(*)[*]{*};body(*)[*]{*};br(*)[*]{*};button(*)[*]{*};canvas(*)[*]{*};caption(*)[*]{*};cite(*)[*]{*};code(*)[*]{*};col(*)[*]{*};colgroup(*)[*]{*};data(*)[*]{*};datalist(*)[*]{*};dd(*)[*]{*};del(*)[*]{*};details(*)[*]{*};dfn(*)[*]{*};dialog(*)[*]{*};div(*)[*]{*};dl(*)[*]{*};dt(*)[*]{*};em(*)[*]{*};embed(*)[*]{*};fieldset(*)[*]{*};figcaption(*)[*]{*};figure(*)[*]{*};footer(*)[*]{*};form(*)[*]{*};h1(*)[*]{*};h2(*)[*]{*};h3(*)[*]{*};h4(*)[*]{*};h5(*)[*]{*};h6(*)[*]{*};head(*)[*]{*};header(*)[*]{*};hr(*)[*]{*};html(*)[*]{*};i(*)[*]{*};iframe(*)[*]{*};img(*)[*]{*};input(*)[*]{*};ins(*)[*]{*};kbd(*)[*]{*};label(*)[*]{*};legend(*)[*]{*};li(*)[*]{*};link(*)[*]{*};main(*)[*]{*};map(*)[*]{*};mark(*)[*]{*};meta(*)[*]{*};meter(*)[*]{*};nav(*)[*]{*};noscript(*)[*]{*};object(*)[*]{*};ol(*)[*]{*};optgroup(*)[*]{*};option(*)[*]{*};output(*)[*]{*};p(*)[*]{*};param(*)[*]{*};picture(*)[*]{*};pre(*)[*]{*};progress(*)[*]{*};q(*)[*]{*};rp(*)[*]{*};rt(*)[*]{*};ruby(*)[*]{*};s(*)[*]{*};samp(*)[*]{*};section(*)[*]{*};select(*)[*]{*};small(*)[*]{*};source(*)[*]{*};span(*)[*]{*};strong(*)[*]{*};style(*)[*]{*};sub(*)[*]{*};summary(*)[*]{*};sup(*)[*]{*};svg(*)[*]{*};table(*)[*]{*};tbody(*)[*]{*};td(*)[*]{*};template(*)[*]{*};textarea(*)[*]{*};tfoot(*)[*]{*};th(*)[*]{*};thead(*)[*]{*};time(*)[*]{*};title(*)[*]{*};tr(*)[*]{*};track(*)[*]{*};u(*)[*]{*};ul(*)[*]{*};var(*)[*]{*};video(*)[*]{*};wbr(*)[*]{*};",

วางหรือสร้างข้อความธรรมดาเท่านั้น

"enterMode": 2,
"shiftEnterMode": 2,
"allowedContent": "*",
"disallowedContent": "*",
"forcePasteAsPlainText": true,
"toolbar": [],
"removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools",

ตั้งค่า คุณสมบัติเฉพาะ นี้ใน ไฟล์การกำหนดค่า ของคุณ ระบุเครื่องหมายจุลภาค (,) หลังค่านี้เว้นแต่จะเป็นคุณสมบัติสุดท้ายในไฟล์

"disableImages": true,

อนุญาตให้ตัวแก้ไขใช้แบบเต็มหน้าจอ

ตั้งค่า คุณสมบัติเฉพาะ เหล่านี้ใน ไฟล์การกำหนดค่า ของคุณ แต่ละค่ายกเว้นค่าสุดท้ายควรตามด้วยเครื่องหมายจุลภาค (,)

"showAsTabControl": true,
"showFullScreenExpander": true,

ภาพหน้าจอของตัวแก้ไข Rich Text ที่ไฮไลต์ตัวควบคุมส่วนขยายแบบเต็มหน้าจอ

อนุญาตให้ดูและแก้ไขเนื้อหา HTML

หากต้องการให้ผู้ใช้สามารถดูและแก้ไข HTML ของเนื้อหาได้โดยตรง ให้แสดงแท็บ HTML

"showAsTabControl": true,
"showHtml": true,

ภาพหน้าจอของตัวแก้ไข Rich Text ที่ไฮไลต์ตัวควบคุมแท็บ HTML

แสดงแถบเครื่องมือแบบง่ายหรือลบออกทั้งหมด

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

"toolbar": [ { "items": [ "FontSize", "Bold", "Italic", "Underline", "BGColor" ] } ],

ภาพหน้าจอของตัวแก้ไข Rich Text ที่ไฮไลต์แถบเครื่องมือแบบง่าย

หากต้องการลบแถบเครื่องมือทั้งหมด ให้ตั้งค่า toolbar เป็น '[]' (วงเล็บเหลี่ยมสองอัน)

เพิ่มรายการแบบอักษรใหม่ และตั้งค่า Brush Script MT 20 พิกเซล เป็นแบบอักษรเริ่มต้น

"font_names": "Brush Script MT/'Brush Script MT', cursive;Calibri/Calibri, Helvetica, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;"
"font_defaultLabel": "Brush Script MT"
"fontSize_sizes": "8/8px;12/12px;20/20px;32/32px"
"fontSize_defaultLabel": "20"
"stickyStyle": {
  "font-size": "20px",
  "font-family": "'Brush Script MT', cursive"
},

ภาพหน้าจอของตัวแก้ไข Rich Text ที่มี Brush Script เป็นแบบอักษรเริ่มต้นและรายการแบบอักษรใหม่

วางตำแหน่งแถบเครื่องมือที่ด้านบนสุดของตัวแก้ไข Rich Text

"toolbarLocation": "top",

เริ่มตัวแก้ไขที่ความสูง 30 พิกเซล และขยายเพื่อให้พอดีกับเนื้อหา

"autoGrow_onStartup": false,
"autoGrow_maxHeight": 0,
"autoGrow_minHeight": 30,
"height": 30,

ภาพหน้าจอที่แสดงให้เห็นว่าการพิมพ์ลงในพื้นที่ Rich Text หรือการวางรูปภาพจะเพิ่มพื้นที่ให้พอดีกับเนื้อหา

แก้ไขความสูงของตัวแก้ไขที่ 500 px

"removePlugins": [ "autogrow" ],
"height": 500,

ภาพหน้าจอที่แสดงให้เห็นว่าด้วยความสูงคงที่ เมื่อมีการเพิ่มเนื้อหาลงในพื้นที่ Rich Text เพียงพอ แถบเลื่อนจะปรากฏขึ้น

ทำให้เมนูบริบท (คลิกขวา) ใช้เมนูบริบทเริ่มต้นของเบราว์เซอร์

หากต้องการแทนที่เมนูบริบทของตัวควบคุมตัวแก้ไขด้วยเมนูบริบทเริ่มต้นของเบราว์เซอร์ ให้ลบปลั๊กอินเมนูบริบทออก

"removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools",

ค้นหาการกำหนดค่าของตัวควบคุมตัวแก้ไข Rich Text

หากคุณไม่แน่ใจว่าการกำหนดค่าอินสแตนซ์ของตัวแก้ไข Rich Text มาจากไหน คุณสามารถค้นหาได้โดยใช้เครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์

ใน Microsoft Edge หรือ Google Chrome เรียกใช้แอปแบบจำลองของคุณและเปิดฟอร์มที่มีตัวควบคุมตัวแก้ไข Rich Text
คลิกขวาพื้นที่เนื้อหาตัวแก้ไข Rich Text และเลือก ตรวจสอบ
ในบานหน้าต่างการตรวจสอบ ให้เลือกแท็บ คอนโซล
เลือกหน้าหลัก Main.aspx ในกล่องรายการบนแถบคำสั่ง

ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ที่เน้นแท็บคอนโซลและหน้า main.aspx

เลือกไอคอน ล้างคอนโซล บนแถบคำสั่งของบานหน้าต่างการตรวจสอบ จากนั้นป้อน CKEDITOR.config. ในคอนโซล

ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ที่เน้นไอคอนล้างคอนโซล

ในคอนโซลบานหน้าต่างการตรวจสอบ ให้ป้อน CKEDITOR.config. เพื่อแสดงการกำหนดค่าต่างๆ

รายการการกำหนดค่า CK Editor

เลือกการกำหนดค่า เช่น autoGrow_minHeight เพื่อแสดงการตั้งค่าปัจจุบัน

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

ตารางต่อไปนี้อธิบายเครื่องมือการจัดรูปแบบที่มีอยู่ในตัวแก้ไข Rich Text ตามค่าเริ่มต้น

ชื่อ	Shortcut key	รายละเอียด
คัดลอกการจัดรูปแบบ	Ctrl+Shift+C, Ctrl+Shift+V	นำลักษณะของส่วนเฉพาะไปใช้กับส่วนอื่น
ชื่อแบบอักษร	Ctrl+Shift+F	เลือกแบบอักษร แอปพลิเคชันจะพิจารณาแบบอักษรที่คุณเลือกเป็นแบบอักษรเริ่มต้น Segoe UI เป็นแบบอักษรเริ่มต้นหากคุณไม่ได้เลือกไว้ เมื่อคุณเลือกเนื้อหาที่จัดรูปแบบแล้ว ชื่อแบบอักษรที่ใช้กับเนื้อหานั้นจะปรากฏขึ้น หากการเลือกของคุณมีแบบอักษรหลายแบบ ชื่อแบบอักษรรายการแรกที่คุณเลือกจะปรากฏขึ้น
ขนาดแบบอักษร	Ctrl+Shift+P	เปลี่ยนขนาดของข้อความของคุณ แอปพลิเคชันจะพิจารณาขนาดแบบอักษรที่คุณเลือกเป็นขนาดเริ่มต้น 12 เป็นขนาดเริ่มต้นหากคุณไม่ได้เลือกไว้ เมื่อคุณเลือกเนื้อหาที่จัดรูปแบบแล้ว ขนาดแบบอักษรที่ใช้กับเนื้อหานั้นจะปรากฏขึ้น หากการเลือกของคุณมีหลายขนาด ขนาดรายการแรกที่คุณเลือกจะปรากฏขึ้น
ตัวหนา	Ctrl+B	ทำให้ข้อความของคุณเป็นตัวหนา
Italic	Ctrl+I	ทำให้ข้อความของคุณเป็นตัวเอียง
ขีดเส้นใต้	Ctrl+U	ขีดเส้นใต้ข้อความของคุณ
สีพื้นหลัง		ทำให้ข้อความของคุณโดดเด่นโดยการเน้นด้วยสีสดใส
สีข้อความ		เปลี่ยนสีของข้อความของคุณ
แทรก/นำรายการสัญลักษณ์แสดงหัวข้อย่อยออก		สร้างรายการสัญลักษณ์แสดงหัวข้อย่อย
แทรก/นำรายการลำดับเลขออก		สร้างรายการลำดับเลข
ลดการเยื้อง		เลื่อนย่อหน้าของคุณให้ใกล้กับระยะขอบมากขึ้น
เพิ่มการเยื้อง		ย้ายย่อหน้าของคุณออกห่างจากระยะขอบ
บล็อกข้อความที่อ้างอิง		ใช้รูปแบบคำพูดระดับบล็อคในเนื้อหาของคุณ
จัดชิดซ้าย	Ctrl+L	จัดวางเนื้อหาของคุณตรงกับระยะขอบซ้าย
จัดกึ่งกลาง	Ctrl+E	จัดเนื้อหาของคุณกึ่งกลางหน้า
จัดชิดขวา	Ctrl+R	จัดเนื้อหาของคุณให้ชิดขอบขวา
ลิงก์		สร้างลิงค์ในเอกสารของคุณเพื่อการเข้าถึงเว็บเพจและทรัพยากรระบบคลาวด์อื่นๆ ป้อนหรือวางข้อความจุดยึดในช่อง ข้อความที่แสดง จากนั้นป้อนหรือวาง URL ลงในช่อง URL หรือให้เลือก ชนิดลิงก์ และโปรโตคอล หากลิงก์นั้นไปยังสิ่งอื่นที่ไม่ใช่หน้าเว็บ หากต้องการระบุตำแหน่งที่ลิงก์ชนิด URL ควรเปิด ให้เลือกแท็บ เป้าหมาย จากนั้นเลือก เป้าหมาย URL ที่วางหรือพิมพ์จะถูกแปลงเป็นลิงก์โดยอัตโนมัติ ตัวอย่างเช่น `http://myexample.com` กลายเป็น `<a href="http://myexample.com">http://myexample.com</a>`
ยกเลิกเชื่อมโยง		ลบลิงก์ออกจากจุดยึดและทำให้เป็นข้อความธรรมดา
ตัวยก		พิมพ์ตัวอักษรขนาดเล็กเหนือบรรทัดข้อความ
ตัวห้อย		พิมพ์ตัวอักษรขนาดเล็กใต้บรรทัดข้อความ
ขีดฆ่า		ขีดฆ่าข้อความโดยการลากเส้นผ่าน
Image		หากต้องการแทรกรูปภาพ ให้วางรูปภาพจากคลิปบอร์ดลงในพื้นที่เนื้อหา หรือลากไฟล์รูปภาพจากโฟลเดอร์ไปยังพื้นที่เนื้อหา ลากมุมใดก็ได้ของภาพเพื่อปรับขนาด ตัวควบคุมรองรับรูปภาพ .png, .jpg และ .gif หากต้องการควบคุมแหล่งที่มา ลักษณะ และการทำงานของรูปภาพได้มากขึ้น ให้เลือกปุ่ม รูปภาพ เรียกดูไฟล์รูปภาพในโฟลเดอร์ในเครื่องหรือป้อน URL ถ้ารูปภาพเก็บอยู่ในเซิร์ฟเวอร์ภายนอก ให้ป้อนพาธแบบเต็ม ถ้ารูปนั้นอยู่ในเซิร์ฟเวอร์เฉพาะที่ คุณสามารถป้อนพาธแบบย่อ หรือป้อนความสูงและความกว้างที่ต้องการเพื่อปรับขนาดรูปภาพ และเลือกการจัดตำแหน่ง คุณควรป้อนข้อความแสดงแทนเพื่ออธิบายรูปภาพสำหรับบุคคลที่ใช้โปรแกรมอ่านหน้าจอด้วย หากรูปภาพเป็นลิงก์ไปยังหน้าเว็บหรือทรัพยากรบนระบบคลาวด์อื่นๆ ให้ป้อน URL ของทรัพยากรในช่อง URL เป้าหมาย และหากจำเป็น ให้เลือก เป้าหมาย ที่ลิงก์ควรเปิด
ทิศทางของข้อความจากซ้ายไปขวา		เปลี่ยนข้อความเป็นจากซ้ายไปขวา การตั้งค่านี้เป็นค่าเริ่มต้น
ทิศทางของข้อความจากขวาไปซ้าย		เปลี่ยนข้อความเป็นจากขวาไปซ้ายสำหรับเนื้อหาภาษาแบบสองทิศทาง
ยกเลิกการดำเนินการ		ย้อนกลับการเปลี่ยนแปลงล่าสุดที่คุณทำกับเนื้อหา
ทําซ้ำ		ยกเลิกการเลิกทำครั้งล่าสุด หรือใช้การเปลี่ยนแปลงครั้งล่าสุดที่คุณทำกับเนื้อหา
นำรูปแบบออก		ลบการจัดรูปแบบทั้งหมดออกจากข้อความที่เลือก
Table		แทรกตารางตามจำนวนแถวและคอลัมน์ที่คุณเลือก หากต้องการควบคุมขนาดและลักษณะของตารางได้มากขึ้น ให้เลือกปุ่ม ตาราง > เพิ่มเติม แล้วเปลี่ยนคุณสมบัติ คุณยังสามารถคลิกขวาที่ตารางเพื่อดูและเปลี่ยนแปลงคุณสมบัติได้ หากต้องการเปลี่ยนความกว้างของคอลัมน์ ให้ลากเส้นขอบ คุณสามารภเลือกหนึ่งหรือหลายเซลล์ แถว หรือคอลัมน์ และใช้การจัดรูปแบบเฉพาะ เพิ่มลิงก์ไปยังข้อความที่เลือก และตัด คัดลอก และวางแถวหรือคอลัมน์ทั้งหมด
การตั้งค่าส่วนบุคคล		ตั้งค่าแบบอักษรเริ่มต้นและขนาดแบบอักษรของคุณ
วิธีใช้การช่วยสำหรับการเข้าถึง	Alt+0	เปิดรายการแป้นพิมพ์ลัดที่คุณสามารถใช้ได้ในตัวแก้ไข Rich Text
ขยายแถบเครื่องมือ		เมื่อหน้าต่างแคบเกินไปที่จะแสดงแถบเครื่องมือทั้งหมด ให้เลือกเพื่อขยายแถบเครื่องมือเป็นแถวที่สอง

เคล็ดลับ

หากต้องการใช้ตัวตรวจสอบการสะกดในเบราว์เซอร์ ให้กดปุ่ม Ctrl ขณะที่คุณคลิกขวาข้อความที่คุณต้องการตรวจสอบ มิฉะนั้น การคลิกขวาที่เมนู (บริบท) จะเป็นการจัดรูปแบบตามบริบทสำหรับองค์ประกอบที่คุณเลือก
อีกทางเลือกหนึ่งสำหรับตัวตรวจการสะกดในตัวของเบราว์เซอร์คือ ส่วนขยายเบราว์เซอร์ Microsoft Editor Microsoft Editor ทำงานได้อย่างราบรื่นกับตัวควบคุม ตัวแก้ไข Rich Text และเมื่อเปิดใช้งาน จะมีความสามารถในการตรวจสอบการสะกดและไวยากรณ์แบบอินไลน์ที่รวดเร็วและง่ายดาย

ใช้ตัวแก้ไข Rich Text แบบออฟไลน์

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

ปลั๊กอินต่อไปนี้สามารถใช้งานในตัวแก้ไข Rich Text ขณะออฟไลน์:

ajax, autogrow, basicstyles, bidi, blockquote, button, confighelper, contextmenu, dialog, dialogui, editorplaceholder, enterkey, entities, fakeobjects, floatingspace, floatpanel, format, horizontalrule, htmlwriter, indent, indentblock, indentlist, justify, lineutils, list, listblock, maximize, menu, menubutton, notification, notificationaggregator, panel, panelbutton, popup, preview, removeformat, resize, richcombo, selectall, showborders, sourcearea, specialchar, stylescombo, tab, textmatch, textwatcher, toolbar, undo, widgetselection, wysiwygarea, xml

เครื่องมือการจัดรูปแบบต่อไปนี้สามารถใช้งานในตัวแก้ไข Rich Text ขณะออฟไลน์:

ตัวหนา, ตัวเอียง, ขีดเส้นใต้, รายการสัญลักษณ์แสดงหัวข้อย่อยและลำดับเลข, ลดและเพิ่มการเยื้อง, บล็อกเครื่องหมายคำพูด, จัดชิดซ้าย, จัดกึ่งกลาง, จัดชิดขวา, ขีดทับ, ข้อความสองทิศทาง, เลิกทำและทำซ้ำ และลบการจัดรูปแบบ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ตัวแก้ไข Rich Text

ฟิลด์ Rich text จัดเก็บแท็ก HTML สำหรับการจัดรูปแบบพร้อมกับข้อมูลที่ผู้ใช้ป้อน เมื่อคุณตั้งค่าขนาดสูงสุดของฟิลด์ Rich Text ตรวจสอบให้แน่ใจว่าอนุญาตทั้งแท็ก HTML และข้อมูลของผู้ใช้
เพื่อประสิทธิภาพที่ดีที่สุด ควรรักษาเนื้อหา HTML ของคุณให้มีขนาดไม่เกิน 1 MB เมื่อมีขนาดใหญ่กว่า คุณอาจสังเกตเห็นว่าเวลาตอบสนองในการโหลดและแก้ไขช้าลง
ในการกำหนดค่าเริ่มต้น รูปภาพจะไม่ส่งผลเสียต่อประสิทธิภาพเนื่องจากจัดเก็บแยกต่างหากจากเนื้อหา HTML อย่างไรก็ตาม รูปภาพจะถูกจัดเก็บเป็นเนื้อหา base64 ในคอลัมน์ข้อความเมื่อผู้ใช้ที่อัปโหลดรูปภาพเหล่านั้นไม่มีสิทธิ์ในตาราง msdyn_richtextfiles เนื้อหา Base64 มีขนาดใหญ่ ดังนั้นโดยทั่วไปคุณจึงไม่ต้องการจัดเก็บรูปภาพเป็นส่วนหนึ่งของเนื้อหาคอลัมน์
หากคุณมีบทบาทความปลอดภัยของผู้ดูแลระบบหรือผู้ใช้พื้นฐาน คุณลักษณะรูปแบบส่วนตัวของผู้ใช้จะทำงานตามค่าเริ่มต้น หากคุณไม่มีบทบาทเหล่านี้ คุณต้องมีสิทธิ์ในการสร้าง อ่าน และเขียนบนตาราง msdyn_customcontrolextendedsettings เพื่อให้ปลั๊กอินการตั้งค่าส่วนบุคคลของผู้ใช้ทำงานได้

คำถามที่ถามบ่อย

เหตุใดอักขระที่พิมพ์จึงแสดงช้า

หากคุณมีเนื้อหาจำนวนมากในตัวแก้ไข เวลาตอบสนองอาจเพิ่มขึ้น รักษาเนื้อหาให้มีขนาดไม่เกิน 1 MB เพื่อประสิทธิภาพที่ดีที่สุด การตรวจการสะกดหรือไวยากรณ์อาจทำให้ประสิทธิภาพการพิมพ์ช้าลง

ทำไมฉันไม่สามารถอัปโหลดภาพได้ เหตุใดตัวอย่างรูปภาพจึงไม่สามารถโหลดได้

หากชื่อไฟล์รูปภาพ รวมถึงพาธยาว อาจไม่สามารถอัปโหลดไฟล์หรือแสดงตัวอย่างไม่ได้ ลองย่อชื่อไฟล์หรือย้ายไปยังตำแหน่งที่มีพาธสั้นลง แล้วอัปโหลดอีกครั้ง

เหตุใดฉันจึงเห็น HTML ในข้อความของฉัน

ถ้าใช้ตัวควบคุมตัวแก้ไข Rich Text ในคอลัมน์ที่ไม่ได้จัดรูปแบบสำหรับ Rich Text เนื้อหาจะปรากฏใน HTML ด้านล่างแทนที่จะเป็นข้อความที่จัดรูปแบบ

ภาพหน้าจอของ HTML ที่ปรากฏในพื้นที่เนื้อหาของตัวแก้ไข

หากต้องการแก้ไขปัญหานี้ โปรดตรวจสอบให้แน่ใจว่า รูปแบบของคอลัมน์ตั้งค่าเป็น Rich Text

ดูเพิ่มเติม