Yoopta Editor
v4.9.3
Yoopta-editor เป็นตัวแก้ไขข้อความแบบโอเพนซอร์ซฟรีที่สร้างขึ้นสำหรับแอพ React มันเต็มไปด้วยคุณสมบัติที่ให้คุณสร้างตัวแก้ไขที่มีประสิทธิภาพและใช้งานง่ายเช่นความคิดงานฝีมือ coda, สื่อ ฯลฯ
ด้วย Yoopta-editor คุณสามารถปรับแต่งทุกอย่างให้พอดีกับสิ่งที่คุณต้องการ ต้องการปรับแต่งรูปลักษณ์เพิ่มคุณสมบัติที่ยอดเยี่ยมหรือสร้างส่วนต่อประสานผู้ใช้ที่กำหนดเองอย่างสมบูรณ์หรือไม่? ไม่มีปัญหา. Yoopta-editor ช่วยให้คุณมีความยืดหยุ่นในการทำทุกอย่างทำให้ง่ายต่อการสร้างเครื่องมือที่สมบูรณ์แบบสำหรับโครงการของคุณ ทั้งหมดนี้สามารถปรับแต่งได้ขยายได้และติดตั้งง่าย!
แกนกลาง
ปลั๊กอิน
เครื่องมือ
คะแนน
ขั้นแรกให้ติดตั้งการพึ่งพาเพียร์และแพ็คเกจ Yoopta Core ด้วยปลั๊กอินอย่างน้อยหนึ่งตัว
# # slate, slate-react, react, react-dom - peer dependencies
# # @yoopta/editor - core package
yarn add slate slate-react @yoopta/editor @yoopta/paragraph
# or
npm install slate slate-react @yoopta/editor @yoopta/paragraphนำเข้าจาก core package @yoopta/editor editor component และฟังก์ชั่นเพื่อสร้างอินสแตนซ์ตัวแก้ไข
import YooptaEditor , { createYooptaEditor } from '@yoopta/editor' ;
const plugins = [ ... ] ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
plugins = { plugins }
value = { value }
onChange = { onChange }
/>
</ div >
) ;
}อุปกรณ์ประกอบฉากที่มีอยู่สำหรับส่วนประกอบ yooptaeditor
type YooptaEditor = {
/* editor instance */
editor : YooEditor ;
/* list of plugins */
plugins : YooptaPlugin [ ] ;
/* list of marks */
marks ?: YooptaMark < any > [ ] ;
/* Value. [Default] - undefined */
value ?: YooptaContentValue ;
/* Change handler */
onChange ?: ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => void ;
/* autoFocus. [Default] - true */
autoFocus ?: boolean ;
/* className - class name */
className ?: string ;
/* These props define the area for the selection box.
Good practice - passing parent element.
[Default] - document */
selectionBoxRoot ?: HTMLElement | React . MutableRefObject < HTMLElement | null > | false ;
children ?: React . ReactNode ;
/* Props for tools. You can get access to any passed tools using `useTools` hook from @yoopta/editor */
tools ?: Partial < Tools > ;
placeholder ?: string ;
readOnly ?: boolean ;
/* Width. [Default] - 400px. Will be DEPRECATED, use style object */
width ?: number | string ;
/* Style CSS Object. [Default] - { width: '400px', paddingBottom: '100px' } */
style ?: number | string ;
/* Id for your editor instance. Can be useful for multiple editors */
id ?: number | string ;
} ;นี่คือรายการปลั๊กอินที่มีอยู่
import YooptaEditor , { createYooptaEditor } from '@yoopta/editor' ;
import Paragraph from '@yoopta/paragraph' ;
import Blockquote from '@yoopta/blockquote' ;
const plugins = [ Paragraph , Blockquote ] ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
placeholder = "Type text.."
value = { value }
onChange = { onChange }
// here we go
plugins = { plugins }
/>
</ div >
) ;
}ตรวจสอบรหัสด้วยปลั๊กอิน
Yoopta-editor มีเครื่องมือที่มีประโยชน์ที่สามารถช่วยคุณได้เมื่อทำงานกับตัวแก้ไข
นี่คือรายการเครื่องมือที่มีอยู่
ตรวจสอบรหัสด้วยเครื่องมือ
// IMPORT TOOLS
import LinkTool , { DefaultLinkToolRender } from '@yoopta/link-tool' ;
import ActionMenu , { DefaultActionMenuRender } from '@yoopta/action-menu-list' ;
import Toolbar , { DefaultToolbarRender } from '@yoopta/toolbar' ;
// Tools should be defined outside component
const TOOLS = {
Toolbar : {
tool : Toolbar ,
render : DefaultToolbarRender ,
} ,
ActionMenu : {
tool : ActionMenu ,
render : DefaultActionMenuRender ,
} ,
LinkTool : {
tool : LinkTool ,
render : DefaultLinkToolRender ,
} ,
} ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
plugins = { plugins }
placeholder = "Type text.."
value = { value }
onChange = { onChange }
// here we go
tools = { TOOLS }
/>
</ div >
) ;
}เครื่องหมายเป็นรูปแบบข้อความที่เรียบง่าย
นี่คือรายการเครื่องหมายที่มีอยู่จากแพ็คเกจ @yoopta/marks
// IMPORT MARKS
import { Bold , Italic , CodeMark , Underline , Strike , Highlight } from '@yoopta/marks' ;
const MARKS = [ Bold , Italic , CodeMark , Underline , Strike , Highlight ] ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
placeholder = "Type text.."
plugins = { plugins }
value = { value }
onChange = { onChange }
tools = { TOOLS }
// here we go
marks = { MARKS }
/>
</ div >
) ;
}ตรวจสอบรหัสด้วยเครื่องหมาย
ค้นหาตัวอย่างที่มีประโยชน์ด้านล่างของการใช้ประโยชน์จาก Yoopta-editor ในโครงการของคุณ ตัวอย่างเหล่านี้จะช่วยให้คุณเริ่มต้นได้อย่างรวดเร็วและแสดงให้คุณเห็นว่าการรวมและปรับแต่งตัวแก้ไขตามความต้องการของคุณเป็นเรื่องง่ายเพียงใด
โอเคไปกันเถอะ!
หากคุณพบว่า Yoopta-editor มีประโยชน์และมีค่าสำหรับโครงการของคุณฉันขอให้คุณแสดงการสนับสนุนของคุณโดยมอบให้กับ repo ️ดาวนี้ใน GitHub ความชื่นชมของคุณมีความหมายกับฉันมากและช่วยให้ฉันเติบโตและปรับปรุงบรรณาธิการสำหรับชุมชนต่อไป -
เฮ้ หากคุณพบว่าโครงการนี้มีประโยชน์หรือช่วยคุณในการทำงานให้พิจารณาสนับสนุนโครงการเพื่อให้แน่ใจว่ามีการปรับปรุงและพัฒนาอย่างต่อเนื่อง การบริจาคของคุณช่วยให้โครงการมีชีวิตอยู่และอนุญาตให้ฉันลงทุนเวลาและทรัพยากรมากขึ้นในการบำรุงรักษาและปรับปรุง
คุณสามารถสนับสนุนโครงการได้โดย:
การมีส่วนร่วมใด ๆ ไม่ว่าเล็กหรือใหญ่นั้นได้รับการชื่นชมอย่างมากและช่วยให้ฉันรักษาโครงการและเพิ่มคุณสมบัติใหม่ที่น่าตื่นเต้น ขอบคุณสำหรับการสนับสนุน!
packages/
├── core - core components of the editor
├── marks - text marks
├── plugins - editor plugin extensions
├── tools - tools packages
└── development - developer playground
หากคุณพร้อมที่จะสนับสนุน Yoopta-editor นี่คือวิธีที่คุณสามารถทำได้:
Yoopta-editor ได้รับการปล่อยตัวภายใต้ใบอนุญาต MIT อย่าลังเลที่จะใช้และแก้ไขสำหรับโครงการของคุณ
