marktion

中文/ภาษาอังกฤษ

แนะนำการทำเครื่องหมาย

Marktion เป็นตัวแก้ไข Markdown WYSIWYG ที่ใช้ Prosemirror ซึ่งอุทิศตนเพื่อเพิ่มประสบการณ์การแก้ไขของ Markdown

ดูเว็บไซต์ของเราในการดำเนินการ

คุณสมบัติ

• [ใหม่] การรวม AI : อินเทอร์เฟซการสนทนา AI ในตัวรองรับส่วนขยายของปลั๊กอิน AI ซึ่งเรียกใช้ที่จุดเริ่มต้นของบรรทัดโดยการกดพื้นที่;

• การแก้ไข WYSIWYG : ตัวอย่างเรียลไทม์ของผลลัพธ์การเรนเดอร์ markdown ให้ประสบการณ์การแก้ไขที่ใช้งานง่ายและคุณสามารถสลับระหว่างโหมดซอร์สโค้ดและโหมดการแก้ไข WYSIWYG ด้วย CTRL + /;

• เมนูสแลชและเมนูฟอง : ได้รับแรงบันดาลใจจากบรรณาธิการของความคิดอย่างรวดเร็วโดยใช้ /; การสนับสนุนโหมดมืด: รองรับการเปิดหรือปิดโหมดมืด

• การสนับสนุนโหมดมืด : เปิดใช้งาน Dark Mode เพื่อให้ประสบการณ์การแก้ไขที่สะดวกสบายในสภาพแวดล้อมที่มีแสงน้อย

การติดตั้งและการใช้งาน

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

npm intall marktion

2. การใช้งาน

 import { ReactEditor } from 'marktion' ;
import 'marktion/dist/style.css' ;

function Editor ( ) {
  return < ReactEditor content = { `# Hello World` } /> ;
}

3. ตัวอย่าง

ลองดูตัวอย่างเพื่อดู marktion.io ในการดำเนินการ

API

ReacteditorProps

คุณสมบัติ	คำอธิบาย	พิมพ์	ค่าเริ่มต้น
เนื้อหา	เนื้อหา markdown เริ่มต้นสำหรับตัวแก้ไข	สาย	-
มืด	เปิดใช้งานหรือปิดการใช้งานโหมดมืดในตัวแก้ไข	บูลีน	เท็จ
uploadoptions.uploader	ฟังก์ชั่นการโทรกลับสำหรับการอัปโหลดรูปภาพ	(file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url>	-
ทำให้	โหมดเรนเดอร์	WYSIWYG | SOURCE
การเปลี่ยน	เนื้อหาแก้ไขเปลี่ยนการโทรกลับ	(editor: Marktion) => void

ปรึกษาเอกสารของ Tiptap เพื่อค้นหา API เพิ่มเติม

MarktionRef

คุณสมบัติ	คำอธิบาย	พิมพ์	ค่าเริ่มต้น
บรรณาธิการ	อินสแตนซ์การทำเครื่องหมาย	การทำเครื่องหมาย	-

ตัวอย่างการใช้งาน:

 import { ReactEditor , ReactEditorRef } from 'marktion' ;

function App ( ) {
  const editorRef = useRef < ReactEditorRef > ( null ) ;

  const onExport = ( ) => {
    const content = editorRef . current ?. editor . getContent ( ) ;
    console . log ( content ) ;
  } ;

  return (
    < >
      < button onClick = { onExport } > export </ button >
      < ReactEditor ref = { editorRef } />
    </ >
  ) ;
} 

ปลั๊กอิน

ปลั๊กอิน AI

ปลั๊กอิน AI ขึ้นอยู่กับ Vercel AI ก่อนที่คุณจะเริ่มคุณต้องสร้างเราเตอร์ AI โปรดดูเอกสารสำหรับข้อมูลเพิ่มเติม: เริ่มต้นใช้งาน

ตัวอย่างการใช้งาน:

 function Editor ( ) {
  const ai = useAI ( {
    basePath : import . meta . env . VITE_OPENAI_BASE_URL
  } ) ;

  return (
    < ReactEditor ref = { editorRef } plugins = { [ ai . plugin ] } >
      { ai . element }
    </ ReactEditor / >
  )
} 

การบริจาค

ขอบคุณที่พิจารณาการทำเครื่องหมาย! หากคุณต้องการมีส่วนร่วมโปรดทำตามขั้นตอนเหล่านี้:

1. แยกที่เก็บไปยังบัญชี GitHub ของคุณ

2. โคลนที่เก็บที่เก็บไว้ในเครื่องของคุณ

git clone https://github.com/yourusername/marktion.git
cd marktion

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

pnpm i

4. ทำการเปลี่ยนแปลงและทดสอบการดัดแปลงของคุณ

5. กระทำการเปลี่ยนแปลงของคุณ

6. สร้างคำขอดึง

ไปที่ที่เก็บต้นฉบับและคลิกที่ "คำขอดึงใหม่" กรอกรายละเอียดที่จำเป็นและอธิบายการเปลี่ยนแปลงที่คุณทำ

เราจะตรวจสอบคำขอดึงของคุณโดยเร็วที่สุด ขอบคุณสำหรับการบริจาคของคุณ!

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียดเพิ่มเติม

ติดต่อ

หากคุณมีคำถามคำแนะนำหรือปัญหาใด ๆ อย่าลังเลที่จะติดต่อเราผ่านช่องทางต่อไปนี้:

• อีเมล: [email protected]

• ตัวติดตามปัญหา: ปัญหาโครงการ (โปรดระบุประเภทปัญหาในชื่อเรื่องปัญหา)