Yoopta Editor
v4.9.3
Yoopta-Editor-это бесплатный редактор с открытым исходным кодом, созданный для приложений React. Он упакован с функциями, которые позволяют вам создать редактор, столь же мощные и удобные для пользователя, как понятие, ремесло, код, средняя и т. Д.
С yoopta-editor вы можете настроить все, чтобы соответствовать именно тому, что вам нужно. Хотите настроить внешний вид, добавить крутые функции или создать совершенно пользовательский пользовательский интерфейс? Без проблем. Yoopta-Editor дает вам гибкость, чтобы сделать все это, позволяя легко создать идеальный инструмент для вашего проекта. Все это настраиваемо, расширяется и легко настроить!
Основной
Плагины
Инструменты
Знаки
Во -первых, установите зависимости от сверстников и пакет Core Yoopta, по крайней мере, один плагин
# # 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/paragraphImport From 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 полезным и ценным для ваших проектов, я любезно прошу вас показать свою поддержку, предоставив этому репо ️ звезду на 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. Не стесняйтесь использовать и изменить его для своих проектов.
