CodeElementFactory

ภาพรวม

CodeElementFactory คือส่วนที่ทำให้ CodeEditor เป็นช่องของฟอร์ม: <textarea data-element="code">
กลายเป็นตัวเขียนโค้ดที่ยังทำงานเหมือนช่องอื่น ส่งไปกับฟอร์ม รับ required และ data-validate แสดงข้อความของ FormError
และเติมค่าจาก data-attr="value:..." และ instance.value ได้

<form data-form="settings">
  <label for="config">Config</label>
  <textarea id="config" name="config" data-element="code" data-language="json" data-max-height="400" required></textarea>
</form>

สร้างจากสคริปต์:

const field = ElementManager.create('code', {id: 'snippet', name: 'snippet', language: 'php', minLines: 10});
form.appendChild(field.element.closest('.code-editor'));

Attribute

ชื่อเดียวกัน (แบบ camelCase) ใช้เป็นตัวเลือกของ ElementManager.create('code', {...}) ได้

Instance

validation, required, isValid(), reset() และ FormError ทำงานเหมือนช่องอื่น ช่องที่ไม่ผ่านจะได้ขอบสีแดงทั้งตัวเขียน

เมธอด

static create(def)

สร้างช่องโค้ดจาก field definition ได้ <textarea> เสมอ

static extractCustomConfig(element, def, dataset)

อ่านตัวเลือกของตัวเขียนจาก attribute data-* คืนเฉพาะตัวเลือกที่ระบุ ที่เหลือใช้ค่าเริ่มต้น

static setupEventListeners(instance)

ผูกตัวเขียนหลังจาก factory พื้นฐานเตรียม element เสร็จ ตัวเขียนจึงครอบ accessor value ของเฟรมเวิร์ก
และค่าที่ FormManager หรือ instance.value กำหนดก็ถูกระบายสีใหม่ด้วย

เอกสารที่เกี่ยวข้อง

• CodeEditor - ตัวเลือก ปุ่มลัด ภาษา และการจัดรูปแบบ
• ElementManager - ชนิดของช่องในฟอร์ม