re editor
v0.5.8
ตัวแก้ไขข้อความที่มีปฏิกิริยาตอบโต้ออกจากกล่อง
เพื่อปรับให้เข้ากับความต้องการการพัฒนาที่แตกต่างกันบรรณาธิการให้วิธีการใช้งานสองวิธีต่อไปนี้
Re-Editor เป็นส่วนประกอบที่ห่อหุ้มซึ่งสามารถใช้งานได้หลังจากการติดตั้ง มันมี @re-re-regen/core และ @re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re แถบเครื่องมือใช้สไตล์ ANTD โดยค่าเริ่มต้น หากคุณต้องการใช้แถบเครื่องมืออื่น ๆ โปรดดูเอกสารที่กำหนดเองต่อไปนี้
$ npm install re-editorแนะนำใน JS
import 're-editor/lib/styles/index.css'นอกจากนี้ยังสามารถนำมาใช้ใน CSS (ต้องการการสนับสนุนการประมวลผลล่วงหน้า CSS)
@import 're-editor/lib/styles/index.css'| คุณสมบัติ | อธิบาย | พิมพ์ |
|---|---|---|
| ค่า | มูลค่าของบรรณาธิการ | วัตถุ |
| การเปลี่ยน | การโทรกลับสำหรับตัวแก้ไขเปลี่ยนเนื้อหา | (ค่า: ค่า) => โมฆะ |
| ผู้ถือครองตำแหน่ง | ข้อความตัวยึด | สาย |
| อย่างอ่านอย่างเดียว | โหมดอ่านอย่างเดียว | บูลีน |
| onimageupload | เตียงภาพที่กำหนดเอง | (ไฟล์: ไฟล์) => สัญญา <url: string> |
| เครื่องมือ | ตั้งค่าเนื้อหาการแสดงผลของแถบเครื่องมือ | อาร์เรย์ <อาเรย์ |
tools props ฉากสนับสนุนอาร์เรย์หากเป็นอาร์เรย์สองมิติมันจะแสดงเป็นกลุ่ม
tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
[ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
[ 'orderedlist' , 'unorderedlist' ]
] }| ชื่อ | การทำงาน |
|---|---|
| ตัวหนา | ตัวหนา |
| ตัวเอียง | ตัวเอียง |
| ขีดเส้นใต้ | ขีดเส้นใต้ |
| การตี | ลบเส้น |
| ผู้สั่งซื้อ | รายการที่สั่งซื้อ |
| รายการที่ไม่ได้เรียงลำดับ | รายการที่ไม่ได้เรียงลำดับ |
| หัวเรื่อง | ชื่อ |
| จัดแนว | การจัดตำแหน่ง |
| ภาพ | รูปภาพ |
| โต๊ะ | แผ่น |
| รหัส | รหัส |
| เลิกทำ | ถอน |
| ทำซ้ำ | ทำใหม่ |
| เต็มหน้าจอ | เต็มหน้าจอ |
ตัวแก้ไขแบ่งออกเป็นสองส่วนพื้นที่แก้ไขเนื้อหาและแถบเครื่องมือ ต่อไปนี้อธิบายวิธีปรับแต่งแถบเครื่องมือ
$ npm install @re-editor/coreคุณสามารถสร้างแถบเครื่องมือตัวแก้ไขได้ แต่อย่างใด คุณต้องผ่านอินสแตนซ์ของตัวแก้ไขไปยังแถบเครื่องมือ You can refer to the implementation of re-editor and @re-editor/toolbar-antd to view the API documentation for details (this part of the document has not been written yet, will it be completed in the near future?)
ตัวอย่างเช่นใช้ฟังก์ชั่นตัวหนา:
import { command } from '@re-editor/core' ;
const Demo = ( props ) => {
function handleClick ( ) {
command ( props . editor ) ( 'bold' )
}
return < div onClick = { handleClick } > bold </ div >
} กระดานชนวนหรือร่างไม่ใช่บรรณาธิการที่บริสุทธิ์พวกเขาเป็นเหมือนกรอบสำหรับการสร้างบรรณาธิการ ผู้แก้ไขใหม่ได้รับการพัฒนาตามกระดานชนวนดังนั้นคุณไม่ต้องใส่ใจกับกระบวนการ构建编辑器
สไตล์แบ่งออกเป็นสองส่วนโหนด (ตัวหนา, H1, H2 ฯลฯ ) และแถบเครื่องมือ พวกเขาทั้งหมดสามารถเขียนสไตล์พื้นฐานผ่าน CSS และแถบเครื่องมือยังสามารถเขียนสไตล์ใหม่ผ่าน CSS ได้อย่างสมบูรณ์
การใช้การอัปเดตที่เพิ่มขึ้นค่าของการโทรกลับ onchange อยู่ในรูปแบบที่ไม่เปลี่ยนรูป คุณสามารถใช้ imutable-js-diff และวิธีการอื่น ๆ เพื่อให้ได้เนื้อหาของ diff สำหรับการปรับปรุงที่เพิ่มขึ้น
รูปภาพจะถูกบันทึกเป็น base64 โดยค่าเริ่มต้น หากคุณต้องการอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์ที่ระบุคุณสามารถใช้ฟังก์ชัน onImageUpload (ไฟล์: ไฟล์) => สัญญา <url: สตริง> โค้ดตัวอย่าง
斜体粗体下划线删除线下标บน
有序列表无序列表
จัด居中对齐左对齐右对齐两端对齐
h1 h2 h3 h4 h5 h6
图片表格代码高亮markdown#>-1.ฟังก์ชั่นอื่น ๆ ยังคงเพิ่มขึ้น ...
