# Getting Started ## Installation ~~~yfm-tabs [{"title":"npm","content":"```shell\nnpm install jodit\n```"},{"title":"yarn","content":"```shell\nyarn add jodit\n```"}] ~~~ ### jsdelivr ```html ``` ### unpkg ```html ``` ### cdnjs ```html ``` ## Download archive You can use the [Jodit Builder](https://xdsoft.net/jodit/builder/) service to download a zip archive. Then, simply include the necessary files: ```html ``` ## Usage Jodit Editor can be initialized by calling the `Jodit.make` method with the selector of the textarea element. ```html ``` ## Using with React The easiest way to use Jodit in React is with the official `jodit-react` wrapper. ### Installation ~~~yfm-tabs [{"title":"npm","content":"```shell\nnpm install jodit-react\n```"},{"title":"yarn","content":"```shell\nyarn add jodit-react\n```"}] ~~~ ### Basic Usage ```jsx import React, { useState, useRef, useMemo, useCallback } from 'react'; import JoditEditor from 'jodit-react'; function App() { const editor = useRef(null); const [content, setContent] = useState(''); const config = useMemo( () => ({ readonly: false, placeholder: 'Start typing...' }), [] ); const handleBlur = useCallback((newContent) => { setContent(newContent); }, []); const handleChange = useCallback((newContent) => { // You can handle onChange here if needed }, []); return ( ); } export default App; ``` ### Advanced Example ```jsx import React, { useState, useRef, useMemo, useCallback } from 'react'; import JoditEditor from 'jodit-react'; function App() { const editor = useRef(null); const [content, setContent] = useState('

Initial content

'); const config = useMemo( () => ({ readonly: false, placeholder: 'Start typing...', buttons: [ 'bold', 'italic', 'underline', '|', 'ul', 'ol', '|', 'font', 'fontsize', 'brush', '|', 'image', 'link', '|', 'align', 'undo', 'redo' ], height: 400, uploader: { insertImageAsBase64URI: true } }), [] ); const handleBlur = useCallback((newContent) => { setContent(newContent); }, []); const handleChange = useCallback((newContent) => { // You can handle onChange here if needed }, []); return (

My React App with Jodit

Content Preview:

); } export default App; ``` ~~~yfm-cut {"title":"Custom React wrapper without jodit-react","content":"If you prefer to create your own React wrapper without using `jodit-react`, you can integrate Jodit directly:\n\n### Installation\n\nFirst, install Jodit via npm or yarn as shown above.\n\n### Basic React Component\n\n```jsx\nimport React, { useRef, useEffect } from 'react';\nimport Jodit from 'jodit';\nimport 'jodit/es2021/jodit.min.css';\n\nfunction JoditEditor({ value, onChange, config }) {\n const editorRef = useRef(null);\n const joditRef = useRef(null);\n\n useEffect(() => {\n if (!editorRef.current) return;\n\n // Initialize Jodit\n joditRef.current = Jodit.make(editorRef.current, {\n ...config,\n events: {\n change: (newValue) => {\n onChange?.(newValue);\n }\n }\n });\n\n // Set initial value\n if (value) {\n joditRef.current.value = value;\n }\n\n // Cleanup on unmount\n return () => {\n joditRef.current?.destruct();\n };\n }, []);\n\n // Update value when it changes externally\n useEffect(() => {\n if (joditRef.current && value !== joditRef.current.value) {\n joditRef.current.value = value;\n }\n }, [value]);\n\n return