react json editor ajrm

คำเตือน:

ดังที่คุณอาจทราบแล้วว่าโปรเจ็กต์ดั้งเดิมของ react-json-editor-ajrm ไม่ได้รับการดูแลอย่างแข็งขันและจะเลิกใช้งานในที่สุด ดังนั้นฉันจึงตัดสินใจกำหนดวันที่เลิกใช้งานอย่างเป็นทางการ วันที่แน่นอนคือวันที่ 15 มิถุนายน 2023

การเสื่อมราคาหมายถึงอะไร?

• หมายความว่าโครงการ Github จะถูกเก็บถาวรเป็นแบบอ่านอย่างเดียว
• หมายความว่าแพ็คเกจ npm จะปรากฏว่าเลิกใช้แล้ว แต่ จะไม่ถูกลบ
• หมายความว่าโครงการใหม่จะพร้อมใช้งานอย่างเป็นทางการในวันนั้น

ฉันอยากจะขอบคุณผู้ที่ใช้มันในโครงการของพวกเขาและผู้ที่มีส่วนร่วมในโครงการในทางใดทางหนึ่ง ฉันไม่ต้องการที่จะรักษาโครงการนี้อีกต่อไป มันถูกสร้างขึ้นในช่วงแรกๆ ของอาชีพวิศวกรซอฟต์แวร์ของฉัน และไม่เป็นไปตามมาตรฐานในปัจจุบันหรือของฉัน

แต่อย่ากังวล ฉันตั้งใจที่จะเติมชีวิตชีวาให้กับโปรเจ็กต์นี้โดยเขียนใหม่ตั้งแต่ต้นจนจบ

ฉันต้องการเรียนรู้จากอดีต และหลีกเลี่ยงปัญหาบางอย่างที่ react-json-editor-ajrm มีอยู่ในปัจจุบัน ฉันอยากจะเน้นย้ำถึงสิ่งที่ทำได้ดี และฉันก็อยากจะทำต่อไป

ฉันได้ตั้งค่าบ้านสำหรับโครงการใหม่นี้ที่นี่ enio ฉันยังได้ตั้งการสนทนาไว้ที่นี่หากคุณมีคำถามหรือความคิดเห็น

react-json-editor-ajrm

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

การติดตั้งการพึ่งพา

• การใช้ตัวจัดการแพ็คเกจโหนด:

   $ npm i --save react-json-editor-ajrm

วิธีใช้

    import JSONInput from 'react-json-editor-ajrm';
    import locale    from 'react-json-editor-ajrm/locale/en';

    <JSONInput
        id          = 'a_unique_id'
        placeholder = { sampleObject }
        colors      = { darktheme }
        locale      = { locale }
        height      = '550px'
    />

คำแนะนำ : มีเส้นทางรูทที่แตกต่างกันสองเส้นทาง: react-json-editor-ajrm และ react-json-editor-ajrm/es อันแรกประกอบด้วยโค้ด ES5 แบบเติมโพลีฟิล ส่วนอันที่สองคือ ES6 ที่ไม่ได้เติมโพลีฟิล เวอร์ชัน react-json-editor-ajrm/es เข้ากันไม่ได้ กับ create-react-app หากคุณไม่แน่ใจว่าคุณต้องการ/ต้องการอันไหน ให้เลือกอันแรก - มันมีความเข้ากันได้ดีที่สุดกับเครื่องมือและเบราว์เซอร์

ตัวอย่าง

โฟลเดอร์ ./examples examples ประกอบด้วยสองตัวอย่าง:

1. webpack-project - ตัวอย่างพื้นฐานที่ไม่มีการโอเวอร์โหลดมากนัก
2. create-react-app-project - ตัวอย่างเล็ก ๆ โดยใช้เทมเพลต create-react-app

ทดสอบทันที!

1. แยกและ/หรือโคลนพื้นที่เก็บข้อมูล Github นี้
2. ไปที่โปรเจ็กต์ตัวอย่างภายใต้ react-json-editor-ajrm/example:

    $ cd path/to/repo/react-json-editor-ajrm/example/webpack-project

3. ติดตั้งการอ้างอิงโครงการตัวอย่าง:

    $ npm i

4. ให้บริการเว็บไซต์ตัวอย่างกับพอร์ต 8080:

   $ npm start

5. เปิด http://localhost:8080 ในเว็บเบราว์เซอร์

บันทึกประจำรุ่น Spotlight ล่าสุด [v2.5.12] - 15 ตุลาคม 2020

1. แก้ไขปัญหาการนำเข้าแล้ว

คุณสมบัติที่จะเกิดขึ้น

1. แก้ไขข้อบกพร่อง

คุณสมบัติ

1. เขียนราวกับว่าคุณอยู่ในโปรแกรมแก้ไขข้อความ
2. ตรวจสอบข้อผิดพลาดทางไวยากรณ์และให้ข้อเสนอแนะ ข้อผิดพลาดแบบกำหนดเองสามารถซ้อนทับในตัวแก้ไขได้
3. คุณสามารถปรับแต่งจานสีได้ตามที่คุณต้องการ
4. ยอมรับวัตถุจาวาสคริปต์ในคุณสมบัติ placeholder ที่จะแสดงหลังจากเมานต์ส่วนประกอบ
5. สำหรับเนื้อหาข้อความที่ถูกต้อง ให้คำนวณและทำให้พร้อมใช้งานใน this.state เป็นข้อความธรรมดา ข้อความมาร์กอัป และวัตถุจาวาสคริปต์
6. รองรับ English German Spanish Chinese French Indonesian Russian Hindi Japanese และ Tamil

คุณสมบัติส่วนประกอบ

ชื่อ	คำอธิบาย	พิมพ์	ที่จำเป็น
สถานที่	สถานที่ของบรรณาธิการของคุณ นำเข้าสถานที่เช่นนี้: import locale from 'react-json-editor-ajrm/locale/en' เรียนรู้เพิ่มเติม	วัตถุ	บังคับ
รหัส	id ทางเลือกเพื่อกำหนดให้กับโหนด DOM สำหรับการป้อนข้อความจริง นอกเหนือจากการป้อนข้อความแล้ว โหนดต่อไปนี้จะได้รับ ID: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels	เชือก	ไม่จำเป็น
ตัวยึดตำแหน่ง	ส่งวัตถุจาวาสคริปต์ที่ถูกต้องที่จะแสดงเมื่อประกอบส่วนประกอบแล้ว กำหนดค่าอื่นเพื่อให้เนื้อหาเริ่มต้นของคอมโพเนนต์แสดงผลอีกครั้ง	วัตถุ	ไม่จำเป็น
รีเซ็ต	ส่ง true เพื่อให้ส่วนประกอบแสดงผลซ้ำหรือ 'รีเซ็ต' เป็นค่าที่ระบุในคุณสมบัติ placeholder เสมอ	บูลีน	ไม่จำเป็น
ดูเท่านั้น	ส่ง true หากคุณต้องการให้เนื้อหาที่แสดงไม่สามารถแก้ไขได้	บูลีน	ไม่จำเป็น
เมื่อเปลี่ยน	เมื่อใดก็ตามที่เหตุการณ์ onKeyPress เกิดขึ้น มันจะส่งคืนค่าเนื้อหา	วัตถุ	ไม่จำเป็น
บนเบลอ	เมื่อใดก็ตามที่เหตุการณ์ onBlur เกิดขึ้น มันจะส่งคืนค่าเนื้อหา	วัตถุ	ไม่จำเป็น
ยืนยันดี	ส่ง false หากคุณต้องการให้เครื่องหมายถูกยืนยันว่าไวยากรณ์ที่ดีถูกซ่อนไว้	บูลีน	ไม่จำเป็น
ความสูง	คุณสมบัติชวเลขเพื่อกำหนดความสูงเฉพาะสำหรับส่วนประกอบทั้งหมด	เชือก	ไม่จำเป็น
ความกว้าง	คุณสมบัติชวเลขเพื่อกำหนดความกว้างเฉพาะสำหรับส่วนประกอบทั้งหมด	เชือก	ไม่จำเป็น
onKeyPressUpdate	ส่ง false หากคุณต้องการให้ส่วนประกอบไม่อัปเดตโดยอัตโนมัติเมื่อกดปุ่ม	บูลีน	ไม่จำเป็น
รอ AfterKeyPress	ระยะเวลาเป็นมิลลิวินาทีที่ต้องรอก่อนที่จะแสดงเนื้อหาอีกครั้งหลังจากกดปุ่ม ค่าดีฟอลต์คือ 1000 เมื่อไม่ได้ระบุ กล่าวอีกนัยหนึ่ง ส่วนประกอบจะอัปเดตหากไม่มีการกดแป้นพิมพ์เพิ่มเติมหลังจากกดครั้งสุดท้ายภายใน 1 วินาที น้อยกว่า 100 มิลลิวินาทีไม่ได้สร้างความแตกต่าง	ตัวเลข	ไม่จำเป็น
แก้ไขข้อผิดพลาดข้อความ	ฟังก์ชันที่กำหนดเองเพื่อแก้ไขข้อความเตือนดั้งเดิมของส่วนประกอบ ฟังก์ชันนี้จะได้รับพารามิเตอร์ประเภท string เพียงตัวเดียว และจะต้องส่งคืน string เท่าๆ กัน	การทำงาน	ไม่จำเป็น
ข้อผิดพลาด	ประกอบด้วยคุณสมบัติดังต่อไปนี้:	วัตถุ	ไม่จำเป็น
ข้อผิดพลาดเหตุผล	สตริงที่มีข้อความแสดงข้อผิดพลาดที่กำหนดเอง	เชือก	ไม่จำเป็น
error.line	ตัวเลขที่ระบุหมายเลขบรรทัดที่เกี่ยวข้องกับข้อความแสดงข้อผิดพลาดแบบกำหนดเอง	ตัวเลข	ไม่จำเป็น
ธีม	ระบุธีมในตัวที่จะใช้	เชือก	ไม่จำเป็น
สี	ประกอบด้วยคุณสมบัติดังต่อไปนี้:	วัตถุ	ไม่จำเป็น
สีค่าเริ่มต้น	รหัสสีฐานสิบหกสำหรับสัญลักษณ์ใดๆ เช่น braces ปีกกา และ comma	เชือก	ไม่จำเป็น
สี.สตริง	รหัสสีฐานสิบหกสำหรับโทเค็นที่ระบุเป็นค่า string	เชือก	ไม่จำเป็น
สี.จำนวน	รหัสสีฐานสิบหกสำหรับโทเค็นที่ระบุเป็นค่า integeter double หรือ float	เชือก	ไม่จำเป็น
สีลำไส้ใหญ่	รหัสสีฐานสิบหกสำหรับโทเค็นที่ระบุว่าเป็น colon	เชือก	ไม่จำเป็น
สีคีย์	รหัสสีฐานสิบหกสำหรับโทเค็นที่ระบุว่าเป็น keys หรือชื่อคุณสมบัติ	เชือก	ไม่จำเป็น
colours.keys_whiteSpace	รหัสสีฐานสิบหกสำหรับโทเค็นที่ระบุว่าเป็น keys ที่อยู่ในเครื่องหมายคำพูด	เชือก	ไม่จำเป็น
สีดั้งเดิม	รหัสสีฐานสิบหกสำหรับโทเค็นที่ระบุว่าเป็นค่า boolean และเป็นค่าว่าง	เชือก	ไม่จำเป็น
สี.ข้อผิดพลาด	รหัสสีฐานสิบหกสำหรับโทเค็นที่มีแท็ก error	เชือก	ไม่จำเป็น
สีพื้นหลัง	รหัสสีฐานสิบหกสำหรับพื้นหลังของส่วนประกอบ	เชือก	ไม่จำเป็น
สีพื้นหลัง_คำเตือน	รหัสสีฐานสิบหกสำหรับข้อความเตือนที่แสดงที่ด้านบนสุดของส่วนประกอบ	เชือก	ไม่จำเป็น
สไตล์	ประกอบด้วยคุณสมบัติดังต่อไปนี้:	วัตถุ	ไม่จำเป็น
style.outerBox	คุณสมบัติในการปรับเปลี่ยนรูปแบบเริ่มต้นของ div คอนเทนเนอร์ภายนอกของส่วนประกอบ	วัตถุ	ไม่จำเป็น
สไตล์.คอนเทนเนอร์	คุณสมบัติในการปรับเปลี่ยนรูปแบบเริ่มต้นของ container ของส่วนประกอบ	วัตถุ	ไม่จำเป็น
style.warningBox	คุณสมบัติในการแก้ไขรูปแบบเริ่มต้นของ div คอนเทนเนอร์ของข้อความเตือน	วัตถุ	ไม่จำเป็น
style.errorMessage	คุณสมบัติในการปรับเปลี่ยนรูปแบบเริ่มต้นของข้อความเตือน	วัตถุ	ไม่จำเป็น
สไตล์.ร่างกาย	คุณสมบัติในการปรับเปลี่ยนรูปแบบเริ่มต้นของ div คอนเทนเนอร์ของเลเบลแถวและรหัส	วัตถุ	ไม่จำเป็น
style.labelColumn	คุณสมบัติในการแก้ไขรูปแบบเริ่มต้นของ div คอนเทนเนอร์ของป้ายกำกับแถว	วัตถุ	ไม่จำเป็น
สไตล์.ฉลาก	คุณสมบัติในการปรับเปลี่ยนสไตล์เริ่มต้นของป้ายกำกับแต่ละแถว	วัตถุ	ไม่จำเป็น
style.contentBox	คุณสมบัติในการปรับเปลี่ยนรูปแบบเริ่มต้นของ div คอนเทนเนอร์ของรหัส	วัตถุ	ไม่จำเป็น

ส่วนส่วนประกอบ

    outerBox
    +-- container
        +--- warningBox
             +---- errorMessage
        +--- body
             +---- labelColumn
                   +----- labels
             +---- contentBox
                   +----- auto generated markup

ค่าเนื้อหา

เมื่อใดก็ตามที่ RJEA เรนเดอร์เนื้อหาอีกครั้ง ฟังก์ชันใดๆ ที่ส่งผ่านไปยังคุณสมบัติ onChange จะได้รับพารามิเตอร์อ็อบเจ็กต์เดี่ยวพร้อมคีย์และค่าต่อไปนี้:

สำคัญ	คำอธิบาย
ข้อความธรรมดา	การแสดงสตริงของเนื้อหานั้นซึ่งรวมถึงการแบ่งบรรทัดและการเยื้อง ยอดเยี่ยมในการ console.log()
ข้อความมาร์กอัป	การแสดงสตริงของมาร์กอัปที่สร้างขึ้นอัตโนมัติซึ่งใช้ในการแสดงเนื้อหา
json.json	เนื้อหาเวอร์ชัน JSON.stringify
jsObject	เนื้อหาเวอร์ชัน javascript object สคริปต์ จะส่งกลับ undefined หากไวยากรณ์ของเนื้อหาไม่ถูกต้อง
เส้น	จำนวนบรรทัดที่แสดงผลสำหรับเนื้อหาที่จะแสดง
ข้อผิดพลาด	ส่งคืนค่า false เว้นแต่ว่าไวยากรณ์ของเนื้อหาไม่ถูกต้อง ซึ่งในกรณีนี้จะส่งคืนอ็อบเจ็กต์ที่มี token และหมายเลข line ซึ่งสอดคล้องกับตำแหน่งที่เกิดข้อผิดพลาดและ reason

ธีมในตัว

RJEA รองรับธีมในตัว นี่คือรายการ

สร้างด้วย

• React.js
• Babel.js สำหรับการถ่ายทอด
• เอนไซม์ สำหรับโปรแกรมอรรถประโยชน์การทดสอบเฉพาะปฏิกิริยา
• Jest สำหรับการทดสอบหน่วย รวมถึงการทดสอบเฉพาะปฏิกิริยาด้วย
• Travis CI เพื่อการบูรณาการอย่างต่อเนื่อง

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT - ดูรายละเอียดในไฟล์ LICENSE.md

ผู้ร่วมให้ข้อมูล

ขอบคุณคนที่ยอดเยี่ยมเหล่านี้ ?:

แอนดรูว์ เรดิแกน - -	แพทริค แซคส์ -	อัลลัน เคห์ล -	เอสเบนวีบี	มาร์คุส เพทรีคอฟสกี้	ริค บรันสเตดท์	เอแดร์ตี้แคท -
เซดริก -	ราดิท -	แอสสเก็ต -	CGVedant -	เชห์บาซ จาฟรี -	วสันธา กุมาร์ RB -	อาทิตยา เปริวัล -
อเล็กเซย์ ลาคอฟ	เทอเรนซ์ ฮวีญ	ริชาร์ด ฮัลล์	โทนี่กูเยนิต18

โครงการนี้เป็นไปตามข้อกำหนดของผู้มีส่วนร่วมทั้งหมด ยินดีต้อนรับการบริจาคใด ๆ !