บทช่วยสอน: กำหนดค่าตัวควบคุม rich text editor บน Power Pages

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

บทช่วยสอนนี้จะใช้ตาราง ข้อคิดเห็น และหน้าเว็บ ติดต่อเรา ที่มีอยู่ในเทมเพลต เค้าโครงเริ่มต้น

ข้อกำหนดเบื้องต้น

  • เว็บไซต์ที่ใช้หนึ่งใน เค้าโครงเริ่มต้นเทมเพลต

ขั้นตอนที่ 1 เพิ่มส่วนประกอบของโค้ดไปยังฟิลด์ในฟอร์ม

  1. ในสตูดิโอออกแบบ เลือก พื้นที่ทำงานข้อมูล

  2. เลือกตาราง ข้อคิดเห็น

  3. เลือก ฟอร์ม แล้วจากนั้นเลือกเพื่อแก้ไข ฟอร์มติดต่อเราแบบง่าย

  4. เลือกฟิลด์ ข้อความ .

  5. เลือก + ส่วนประกอบ แล้วเลือกส่วนประกอบ การป้อนตัวเลข

    เพิ่มส่วนประกอบ RTE ไปยังฟอร์ม

  6. เลือก เสร็จสิ้น

  7. เลือก บันทึก และ เผยแพร่ฟอร์ม

ขั้นตอนที่ 2 กำหนดค่าส่วนประกอบ rich text editor บนเว็บเพจ

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

  1. ในพื้นที่ทำงาน Pages เลือกหน้า ติดต่อเรา

  2. ฟิลด์ ข้อความ ควรปรากฏบนฟอร์มพร้อมกับข้อความ เปิดใช้งานองค์ประกอบที่กำหนดเองเพื่อดูฟิลด์นี้ในการแสดงตัวอย่าง

  3. เลือกฟิลด์แล้วเลือก แก้ไขฟิลด์

  4. เลือกฟิลด์ เปิดใช้งานส่วนประกอบที่กำหนดเอง

    เปิดใช้งานส่วนประกอบ RTE ในสตูดิโอออกแบบ

  5. เลือก ตกลง

  6. เลือก ซิงค์

หมายเหตุ

หากต้องการแสดงข้อมูลเป็น rich text คุณอาจต้องเพิ่มขนาดอักขระของคอลัมน์ข้อความเพื่อรองรับข้อมูลเพิ่มเติม

ขั้นตอนที่ 3.1 เพิ่มสิทธิ์การเข้าถึงตารางสำหรับตารางไฟล์แนบของ Rich Text

หากต้องการใช้และจัดเก็บรูปภาพในตัวแก้ไข Rich Text บนพอร์ทัล คุณจะต้องเพิ่ม สิทธิ์ตาราง ให้กับตารางสิ่งที่แนบของ Rich Text (msdyn_richtextfile)

  1. เปิดสตูดิโอออกแบบและเลือกพื้นที่ทํางานการรักษาความปลอดภัย

  2. เลือก สิทธิ์ตาราง

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

  4. สำหรับ ชนิดการเข้าถึง เลือก การเข้าถึงส่วนกลาง

    หมายเหตุ

    ชนิด การเข้าถึงส่วนกลาง มีการเลือกเนื่องจากไม่มีความสัมพันธ์ระหว่างตารางที่กำหนดค่าให้ใช้ตัวควบคุมตัวแก้ไข Rich Text กับตารางสิ่งที่แนบ rich text

  5. ภายใต้ สิทธิ์ในการ เลือกกล่องกาเครื่องหมาย อ่าน, เขียน, สร้าง และ ลบ

  6. กำหนด บทบาทเว็บ ที่เหมาะสมให้กับสิทธิ์ของตาราง

สำคัญ

หากคุณต้องการจัดเก็บรูปภาพเป็นสตริง base 64 โดยตรงในคอลัมน์ที่กำหนดค่าให้ใช้ตัวควบคุม rich text editor คุณต้องกำหนดค่าตัวควบคุมโดยใช้ ไฟล์การกำหนดค่า JSON ตั้งค่า disableImages และ disableDefaultImageProcessing เป็น จริง เพื่อให้สามารถแสดงผลภาพได้สอดคล้องกันในไคลเอ็นต์ทั้งหมด การใช้วิธีนี้ไม่จำเป็นต้องมีสิทธิ์ตารางแบบส่วนกลางสำหรับตารางสิ่งที่แนบข้อความรูปแบบ Rich Text (msdyn_richtextfile)

ขั้นตอนที่ 3.2 เพิ่มการตั้งค่าไซต์ Web API

เมื่อต้องการบันทึกและเข้าถึงสิ่งที่แนบมากับรูปภาพและแฟ้มในตัวควบคุมตัวแก้ไข Rich Text ให้เพิ่มการตั้งค่าไซต์ต่อไปนี้

  1. เปิด แอปการจัดการพอร์ทัล

  2. ไปที่ การตั้งค่าไซต์

  3. สร้างการตั้งค่าไซต์ต่อไปนี้ หากมีการตั้งค่าไซต์ใดอยู่แล้วสําหรับเว็บไซต์ของคุณ ให้อัปเดตระเบียนที่มีอยู่แทนที่จะสร้างรายการซ้ํา ใส่ชื่อ เลือกเว็บไซต์ของคุณ ใส่ค่าที่ระบุ จากนั้นเลือก บันทึกและปิด

    ชื่อการตั้งค่าไซต์ ค่า
    Webapi/msdyn_richtextfile/enabled จริง
    Webapi/msdyn_richtextfile/fields msdyn_richtextfileid, msdyn_name, msdyn_imageblob, msdyn_fileblob, msdyn_parententityname, msdyn_parententity_fieldname, msdyn_parentid, statecode, statuscode

สำคัญ

ใช้รายการคอลัมน์ที่ชัดเจนทั้งหมดที่แสดงสําหรับWebapi/msdyn_richtextfile/fields จําเป็นต้องใช้ msdyn_fileblob คอลัมน์เพื่อเข้าถึงสิ่งที่แนบมากับไฟล์ แม้ว่าจะเป็นคอลัมน์แบบอ่านอย่างเดียว รายการที่ไม่สมบูรณ์อาจทําให้ไฟล์แนบรูปภาพทํางานได้ในขณะที่ไฟล์แนบล้มเหลว

ขั้นตอนที่ 4 แสดงตัวอย่างไซต์

  1. ในสตูดิโอออกแบบ เลือก ซิงค์

  2. เลือก ตัวอย่าง แล้วเลือก เดสก์ท็อป ไปที่หน้า ติดต่อเรา คุณควรเห็นส่วนประกอบที่กำหนดเองเปิดใช้งานอยู่

    คอมโพเนนต์ RTE บนฟอร์ม

ตัวแก้ไข 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">

ดูเพิ่มเติม