คุณสามารถคอนฟิเกอร์เนื้อหาของข้อความหรือรูปภาพบางอย่างในเลย์เอาต์ เพื่อให้สามารถแก้ไขได้โดยผู้ใช้ที่ทำงานกับเพจที่ใช้เลย์เอาต์ดังกล่าว
ฟังก์ชันนี้สามารถใช้ในธีมใดก็ได้ รวมถึงธีม Bootstrap การแก้ไขจะใช้สไตล์ของเพจเดิมโดยอัตโนมัติ
คุณสามารถเพิ่มมาร์คอัปแบบง่ายในแท็ก HTML ต่อไปนี้ในเลย์เอาต์: <p>, <h1> ผ่าน <h6>, <div> และ <img>
ตัวเลือกการจัดรูปแบบข้อความและรูปภาพมีดังนี้
ข้อความ: ช่วยให้ผู้ใช้สามารถระบุรูปแบบตัวหนา ตัวเอียง ขีดล่าง และลิงค์
รูปภาพ: ช่วยให้ผู้ใช้สามารถระบุลิงค์ไปยังไฟล์รูปภาพ เปลี่ยนแปลงคุณสมบัติของชื่อ (ข้อความที่ผู้ใช้จะเห็นเมื่อวางเคอร์เซอร์บนรูปภาพ) และเพิ่มข้อความสำรองสำหรับช่วยในการเข้าใช้
การแก้ไขอีลิเมนต์ข้อความหรือรูปภาพเพื่อให้ผู้ใช้สามารถแก้ไขได้ ต้องมีสองสิ่งดังนี้
เพิ่ม scs-editable ใน class
เพิ่มแอททริบิว id ที่ไม่ซ้ำกัน
เมื่อแก้ไขเลย์เอาต์แล้ว ฟังก์ชันจะสามารถใช้ได้กับเพจทั้งหมดที่ใช้เลย์เอาต์ดังกล่าว (รวมถึงเพจใหม่ด้วย)
ถ้าคุณคัดลอกและวางเพจ ระบบจะคัดลอกการแก้ไขนี้ไปยังเพจใหม่ด้วย
การแก้ไขแท็กส่วนหัว
ซิงโครไนซ์ไฟล์เลย์เอาต์กับเดสก์ท็อปในระบบของคุณ หรือแก้ไขไฟล์ที่มา HTML สำหรับส่วนหัว <h1>
เพิ่ม scs-editable ใน class และเพิ่มแอททริบิว id="test-heading" ในบรรทัดของรหัสสำหรับส่วนหัว เพื่อให้สามารถรวมโปรแกรมแก้ไขไว้ ตัวอย่างเช่น:
<h1 class="brand-heading scs-editable" id="test-heading">Sample Heading Value</h1>
บันทึกไฟล์
ซิงโครไนซ์กับ Oracle Content Management และโหลดเบราเซอร์ใหม่
เส้นขอบสีดำควรปรากฏรอบส่วนหัว เมื่อผู้ใช้วางเคอร์เซอร์เหนือส่วนหัวนั้น ซึ่งแสดงให้เห็นว่าสามารถแก้ไขได้ เมื่อผู้ใช้คลิกที่ส่วนหัว เส้นขอบจะเป็นสีเขียว ซึ่งระบุว่าผู้ใช้สามารถแก้ไขเนื้อหาของส่วนหัวได้
ถ้ายังไม่ได้ดำเนินการเผยแพร่ ให้เผยแพร่ธีม ถ้ามีการเผยแพร่แล้ว การเปลี่ยนแปลงจะปรากฏเมื่อคุณรีเฟรชเบราเซอร์
เมื่อเผยแพร่ธีมแล้ว ผู้ใช้ไซต์สามารถคลิกที่ส่วนหัว และแก้ไขในตัวสร้างไซต์ได้
ระบบจะสร้างองค์ประกอบจำลองสำหรับอีลิเมนต์ scs-editable เพื่อให้คุณสามารถแก้ไขในตัวสร้างไซต์ และเก็บไว้กับข้อมูลเพจ ในรันไทม์ ก่อนที่จะแสดงผลเพจ คอนโทรลเลอร์จะแทนที่แท็ก scs-editable ด้วยค่าที่คุณกำหนดในตัวสร้างไซต์
การแก้ไขแท็กรูปภาพ
ขั้นตอนการแก้ไขแท็กรูปภาพในเลย์เอาต์เพื่อให้ผู้ใช้สามารถแก้ไขได้นั้น คล้ายกับขั้นตอนของการแก้ไขข้อความ
เพิ่ม scs-editable ใน class
เพิ่มรูปภาพที่ไม่ซ้ำกัน id
ผู้ใช้สามารถคลิกรูปภาพ จากนั้นเปลี่ยนแปลงคุณสมบัติเพื่อใช้รูปภาพอื่น
ต่อไปนี้เป็นตัวอย่างรหัสสำหรับรูปภาพที่ผู้ใช้สามารถแก้ไขได้:
<img class="scs-editable" id="test-image" src="_scs_theme_root_/assets/img/downloads-bg-small.jpg"/>