Yoopta Editor
v4.9.3
Yoopta-Editor adalah editor teks kaya open-source gratis yang dibangun untuk aplikasi React. Ini dikemas dengan fitur yang memungkinkan Anda membangun editor yang kuat dan ramah pengguna seperti gagasan, kerajinan, coda, medium dll.
Dengan Yoopta-Editor, Anda dapat menyesuaikan semuanya agar sesuai dengan apa yang Anda butuhkan. Ingin mengubah tampilan, menambahkan fitur keren, atau membuat antarmuka pengguna yang sepenuhnya khusus? Tidak masalah. Yoopta-editor memberi Anda fleksibilitas untuk melakukan semuanya, membuatnya mudah untuk membuat alat yang sempurna untuk proyek Anda. Semua ini dapat disesuaikan, dapat diperluas, dan mudah diatur!
Inti
Plugin
Peralatan
Tanda
Pertama, pasang dependensi rekan dan paket inti Yoopta dengan setidaknya satu plugin
# # 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/paragraphImpor dari Paket Inti @Yoopta/Komponen Editor Editor dan Fungsi untuk Membuat Instance Editor
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 >
) ;
}Alat peraga yang tersedia untuk komponen 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 ;
} ;Berikut daftar plugin yang tersedia
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 >
) ;
}Periksa kode dengan plugin
Yoopta-Editor menyediakan alat yang berguna yang dapat membantu Anda saat bekerja dengan editor
Berikut adalah daftar alat yang tersedia
Periksa kode dengan alat
// 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 >
) ;
}Tanda adalah format teks sederhana
Berikut adalah daftar tanda yang tersedia dari paket @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 >
) ;
}Periksa kode dengan tanda
Temukan di bawah ini contoh yang berguna untuk memanfaatkan Yoopta-Editor dalam proyek Anda. Contoh -contoh ini akan membantu Anda memulai dengan cepat dan menunjukkan kepada Anda betapa mudahnya mengintegrasikan dan menyesuaikan editor dengan kebutuhan Anda.
Oke, ayo pergi!
Jika Anda menemukan Yoopta-editor berguna dan berharga untuk proyek Anda, saya dengan ramah meminta Anda untuk menunjukkan dukungan Anda dengan memberikan kepada repo ini ️ Star di GitHub. Penghargaan Anda sangat berarti bagi saya dan membantu saya tumbuh dan terus meningkatkan editor untuk komunitas. ?
Hai! Jika Anda menemukan proyek ini bermanfaat atau membantu Anda dalam pekerjaan Anda, pertimbangkan untuk mendukungnya untuk memastikan peningkatan dan pengembangan yang berkelanjutan. Sumbangan Anda membantu menjaga proyek tetap hidup dan memungkinkan saya untuk menginvestasikan lebih banyak waktu dan sumber daya untuk mempertahankan dan meningkatkannya.
Anda dapat mendukung proyek dengan:
Kontribusi apa pun, besar atau kecil, sangat dihargai dan membantu saya mempertahankan proyek dan menambahkan fitur baru yang menarik. Terima kasih atas dukungan Anda!
packages/
├── core - core components of the editor
├── marks - text marks
├── plugins - editor plugin extensions
├── tools - tools packages
└── development - developer playground
Jika Anda siap mendukung Yoopta-Editor, inilah cara Anda dapat melakukannya:
Yoopta-Editor dirilis di bawah lisensi MIT. Jangan ragu untuk menggunakan dan memodifikasinya untuk proyek Anda.
