บทช่วยสอน: กำหนดค่าตัวควบคุม rich text editor บน Power Pages
ในบทช่วยสอน คุณจะได้กำหนดค่าองค์ประกอบตัวแก้ไข Rich Text ในฟอร์ม Microsoft Dataverse และเปิดใช้ Rich Text Editor เพื่อให้มองเห็นได้บนหน้าเว็บ
บทช่วยสอนนี้จะใช้ตาราง ข้อคิดเห็น และหน้าเว็บ ติดต่อเรา ที่มีอยู่ในเทมเพลต เค้าโครงเริ่มต้น
ข้อกำหนดเบื้องต้น
ขั้นตอนที่ 1 เพิ่มส่วนประกอบของโค้ดไปยังฟิลด์ในฟอร์ม
ในสตูดิโอออกแบบ เลือก พื้นที่ทำงานข้อมูล
เลือกตาราง ข้อคิดเห็น
เลือก ฟอร์ม แล้วจากนั้นเลือกเพื่อแก้ไข ฟอร์มติดต่อเราแบบง่าย
เลือกฟิลด์ ข้อความ .
เลือก + ส่วนประกอบ แล้วเลือกส่วนประกอบ การป้อนตัวเลข
เลือก เสร็จสิ้น
เลือก บันทึก และ เผยแพร่ฟอร์ม
ขั้นตอนที่ 2 กำหนดค่าส่วนประกอบ rich text editor บนเว็บเพจ
ในขั้นตอนต่อไปนี้ เราจะกำหนดค่าหน้าความคิดเห็นที่มีอยู่ คุณยังสามารถ สร้างหน้าของคุณเอง และเพิ่มองค์ประกอบ ฟอร์ม ของคุณเอง
ในพื้นที่ทำงาน Pages เลือกหน้า ติดต่อเรา
ฟิลด์ ข้อความ ควรปรากฏบนฟอร์มพร้อมกับข้อความ เปิดใช้งานองค์ประกอบที่กำหนดเองเพื่อดูฟิลด์นี้ในการแสดงตัวอย่าง
เลือกฟิลด์แล้วเลือก แก้ไขฟิลด์
เลือกฟิลด์ เปิดใช้งานส่วนประกอบที่กำหนดเอง
เลือก ตกลง
เลือก ซิงค์
หมายเหตุ
หากต้องการแสดงข้อมูลเป็น rich text คุณอาจต้องเพิ่มขนาดอักขระของคอลัมน์ข้อความเพื่อรองรับข้อมูลเพิ่มเติม
ขั้นตอนที่ 3.1 เพิ่มสิทธิ์ของตารางสำหรับตารางไฟล์สิ่งที่แนบ rich text
สำหรับการใช้และจัดเก็บรูปภาพในตัวแก้ไข Rich Text บนพอร์ทัล คุณจะต้องเพิ่ม สิทธิ์ของตาราง ไปที่ตารางสิ่งที่แนบ rich text (msdyn_richtextfile)
เปิดสตูดิโอการออกแบบและเลือกพื้นที่ทำงาน ตั้งค่า
เลือก สิทธิ์ตาราง
เลือก + สิทธิ์ใหม่ เพื่อสร้างสิทธิ์ของตารางใหม่สำหรับตารางสิ่งที่แนบ Rich Text ชื่อจะเป็นอะไรก็ได้ที่คุณเลือก ในตัวอย่างนี้ เราใช้ สิ่งที่แนบ RTE
สำหรับ ชนิดการเข้าถึง เลือก การเข้าถึงส่วนกลาง
หมายเหตุ
ชนิด การเข้าถึงส่วนกลาง มีการเลือกเนื่องจากไม่มีความสัมพันธ์ระหว่างตารางที่กำหนดค่าให้ใช้ตัวควบคุมตัวแก้ไข Rich Text กับตารางสิ่งที่แนบ rich text
ภายใต้ สิทธิ์ในการ เลือกกล่องกาเครื่องหมาย อ่าน, เขียน, สร้าง และ ลบ
กำหนด บทบาทเว็บ ที่เหมาะสมให้กับสิทธิ์ของตาราง
สำคัญ
หากคุณต้องการจัดเก็บรูปภาพเป็นสตริง base 64 โดยตรงในคอลัมน์ที่กำหนดค่าให้ใช้ตัวควบคุม rich text editor คุณต้องกำหนดค่าตัวควบคุมโดยใช้ ไฟล์การกำหนดค่า JSON ตั้งค่า disableImages และ disableDefaultImageProcessing เป็น จริง เพื่อให้สามารถแสดงผลภาพได้สอดคล้องกันในไคลเอ็นต์ทั้งหมด การใช้วิธีนี้ไม่ต้องการการอนุญาตตารางส่วนกลางในตาราง สิ่งที่แนบ rich text (msdyn_richtextfile)
ขั้นตอนที่ 3.2 เพิ่มการตั้งค่าไซต์ Web API
ในการบันทึกภาพในตัวควบคุมตัวแก้ไข Rich Text คุณจะต้องเพิ่มการตั้งค่าไซต์สองสามรายการ
เปิด แอปการจัดการพอร์ทัล
ไปที่ การตั้งค่าไซต์
สร้างการตั้งค่าไซต์ต่อไปนี้ ป้อนชื่อเว็บไซต์ของคุณและค่า จริง และเลือก บันทึกและปิด
ชื่อการตั้งค่าไซต์ ค่า Webapi/msdyn_richtextfile/enabled จริง Webapi/msdyn_richtextfile/fields *
ขั้นตอนที่ 4 แสดงตัวอย่างไซต์
ในสตูดิโอออกแบบ เลือก ซิงค์
เลือก ตัวอย่าง แล้วเลือก เดสก์ท็อป ไปที่หน้า ติดต่อเรา คุณควรเห็นส่วนประกอบที่กำหนดเองเปิดใช้งานอยู่
ตัวแก้ไข Rich text ในฟอร์มแบบอ่านอย่างเดียว
บนฟอร์มแบบอ่านอย่างเดียว ตัวแก้ไข Rich Text จะแสดงเนื้อหาที่มีการจัดรูปแบบและรูปภาพ เนื้อหาสามารถอ่านได้ แต่ไม่สามารถแก้ไขหรือปรับปรุงได้
หมายเหตุ
รองรับเฉพาะรูปแบบไฟล์ .PNG, .JPG. หรือ .GIF เท่านั้นสำหรับการลากและวาง
การแสดงภาพฟิลด์เนื้อหาของตัวแก้ไข Rich Text โดยใช้ Liquid หรือ Pages Web API
ฟิลด์เนื้อหาของตัวแก้ไข Rich Text สามารถแสดงภาพโดยใช้ Liquid หรือ Pages Web API หากฟิลด์มีไฟล์ภาพใดๆ ไฟล์เหล่านั้นจะมีพาธการอ้างอิง Dataverse Web API หากต้องการแสดงภาพเหล่านี้บนหน้าเว็บ Pages คุณจะต้องแทนที่พาธปัจจุบันด้วยพาธ Pages API ที่เกี่ยวข้อง
ตัวอย่าง:
องค์ประกอบรูปภาพภายในฟิลด์เนื้อหาตัวแก้ไข Rich Text จะแสดงดังต่อไปนี้ โดยมีการอ้างอิงถึงพาธ Dataverse Web API:
<img loading="lazy" src="/api/data/v9.0/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">
หากต้องการอัปเดตองค์ประกอบรูปภาพ ให้แทนที่ /api/data/v9.0 ด้วย /_api ดังที่แสดงด้านล่าง:
<img loading="lazy" src="/_api/msdyn_richtextfiles(d0a473a4-9e95-ee11-be37-000d3a5c393e)/msdyn_imageblob/$value?size=full" style="height:61px; width:376px">