https://github.com/jodit/jodit-react

React wrapper for Jodit
https://github.com/jodit/jodit-react

Last synced: 2 months ago
JSON representation

React wrapper for Jodit

• Host: GitHub
• URL: https://github.com/jodit/jodit-react
• Owner: jodit
• License: mit
• Created: 2017-12-08T11:34:14.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-01-25T13:47:29.000Z (5 months ago)
• Last Synced: 2024-01-29T06:42:58.858Z (5 months ago)
• Language: JavaScript
• Size: 3.06 MB
• Stars: 330
• Watchers: 9
• Forks: 119
• Open Issues: 159
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Security: SECURITY.md

Lists

• awesome-wysiwyg-editors - jodit-react - Jodit 编辑器的 React 组件。  (基于 React)
• awesome-wysiwyg - jodit-react - React component for Jodit Editor. (For React)

README

        
# React Jodit WYSIWYG Editor

[![npm](https://img.shields.io/npm/v/jodit-react.svg)](https://www.npmjs.com/package/jodit-react)

[![npm](https://img.shields.io/npm/dm/jodit-react.svg)](https://www.npmjs.com/package/jodit-react)

[![npm](https://img.shields.io/npm/l/jodit-react.svg)](https://www.npmjs.com/package/jodit-react)

React wrapper for [Jodit](https://xdsoft.net/jodit/)

> [Jodit React PRO](https://xdsoft.net/jodit/pro/) it is an extended version of Jodit React with the same API, but with a lot more features.

## Installation

```bash

npm install jodit-react --save

```

## Update editor version

```bash

npm update jodit-react

```

## Run demo

```bash

npm install --dev

npm run demo

```

and open

```

http://localhost:4000/

```

## Usage

### 1. Require and use Jodit-react component inside your application.

```jsx

import React, { useState, useRef, useMemo } from 'react';

import JoditEditor from 'jodit-react';

const Example = ({ placeholder }) => {

	const editor = useRef(null);

	const [content, setContent] = useState('');

	const config = useMemo(

		{

			readonly: false, // all options from https://xdsoft.net/jodit/docs/,

			placeholder: placeholder || 'Start typings...'

		},

		[placeholder]

	);

	return (

		 setContent(newContent)} // preferred to use only this option to update the content for performance reasons

			onChange={newContent => {}}

		/>

	);

};

```

### Jodit plugins

You can use all Jodit features and write your [own plugin](https://xdsoft.net/jodit/docs/modules/plugin.html) for example.

```js

import JoditEditor, { Jodit } from '../../src/';

/**

 * @param {Jodit} jodit

 */

function preparePaste(jodit) {

	jodit.e.on(

		'paste',

		e => {

			if (confirm('Change pasted content?')) {

				jodit.e.stopPropagation('paste');

				jodit.s.insertHTML(

					Jodit.modules.Helpers.getDataTransfer(e)

						.getData(Jodit.constants.TEXT_HTML)

						.replace(/a/g, 'b')

				);

				return false;

			}

		},

		{ top: true }

	);

}

Jodit.plugins.add('preparePaste', preparePaste);

//...

return ;

```

## License

This package is available under `MIT` License.