แชร์ผ่าน

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

  • บทความ

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

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

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

  • เวอร์ชันพอร์ทัลของคุณต้องเป็น 9.4.3.x หรือสูงกว่า
  • เว็บไซต์ที่ใช้หนึ่งใน เค้าโครงเริ่มต้นเทมเพลต

ขั้นตอนที่ 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. กำหนด บทบาทเว็บ ที่เหมาะสมให้กับสิทธิ์ของตาราง

    การกำหนดสิทธิ์ของตาราง Rich Text

สำคัญ

หากคุณต้องการจัดเก็บรูปภาพเป็นสตริง 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 *

ขั้นตอนที่ 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">

ดูเพิ่มเติม