npmpackage.info

Gathering detailed insights and metrics for jodit-react

Other packages similar to jodit-react

react-jodit-editor

1.1.0

React WYSIWYG Editor Which Uses Jodit & Jodit-React In A Simplified Component

jodit-react-ts

0.9.0

React wrapper for Jodit. Fully written in Typescript.

jodit

4.2.43

Jodit is an awesome and useful wysiwyg editor with filebrowser

jodit-pro-react

4.1.21

Jodit PRO is awesome and usefully wysiwyg editor with filebrowser

Gathering detailed insights and metrics for jodit-react

jodit-react

React wrapper for Jodit

4.1.2

370

MIT

JavaScript

221.75 kB

5,570,634 4.1

Installations

npm install jodit-react

Pull Requests

Open

3

Total

38

Closed

10

Merged

25

Issues

Open

180

Total

241

Closed

61

Releases

Unable to fetch releases

Developer

jodit

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

18.17.1

NPM Version

9.6.7 Statistics

370 Stars

376 Commits

121 Forks

9 Watching

3 Branches

8 Contributors

Updated on 27 Nov 2024

Bundle Size

788.08 kB

Minified

221.75 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

5,570,634

Last day

1.7%

10,418

Compared to previous day

Last week

4.2%

55,924

Compared to previous week

Last month

9.5%

230,037

Compared to previous month

Last year

53.6%

2,240,171

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React Jodit WYSIWYG Editor

React wrapper for Jodit

Jodit React PRO it is an extended version of Jodit React with the same API, but with a lot more features.

Installation

1npm install jodit-react --save

Update editor version

1npm update jodit-react

Run demo

1npm install --dev
2npm run demo

and open

http://localhost:4000/

Usage

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

1import React, { useState, useRef, useMemo } from 'react';
2import JoditEditor from 'jodit-react';
3
4const Example = ({ placeholder }) => {
5	const editor = useRef(null);
6	const [content, setContent] = useState('');
7
8	const config = useMemo(() => ({
9			readonly: false, // all options from https://xdsoft.net/jodit/docs/,
10			placeholder: placeholder || 'Start typings...'
11		}),
12		[placeholder]
13	);
14
15	return (
16		<JoditEditor
17			ref={editor}
18			value={content}
19			config={config}
20			tabIndex={1} // tabIndex of textarea
21			onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
22			onChange={newContent => {}}
23		/>
24	);
25};

Jodit plugins

You can use all Jodit features and write your own plugin for example.

1import JoditEditor, { Jodit } from 'jodit-react';
2
3/**
4 * @param {Jodit} jodit
5 */
6function preparePaste(jodit) {
7	jodit.e.on(
8		'paste',
9		e => {
10			if (confirm('Change pasted content?')) {
11				jodit.e.stopPropagation('paste');
12				jodit.s.insertHTML(
13					Jodit.modules.Helpers.getDataTransfer(e)
14						.getData(Jodit.constants.TEXT_HTML)
15						.replace(/a/g, 'b')
16				);
17				return false;
18			}
19		},
20		{ top: true }
21	);
22}
23Jodit.plugins.add('preparePaste', preparePaste);
24
25//...
26return <JoditEditor />;

You can see how to write plugins in the documentation or on the stand

License

This package is available under MIT License.

No vulnerabilities found.

10

Security-Policy

Determines if the project has published a security policy.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

8

Maintained

Determines if the project is "actively maintained".

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.1

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to jodit-react

Other packages similar to jodit-react

jodit-react

Installations

Pull Requests

3

38

10

25

Issues

180

241

61

Releases

Unable to fetch releases

Developer

jodit

Developer Guide

CommonJS

No

18.17.1

9.6.7

Statistics

Bundle Size

788.08 kB

221.75 kB

Languages

Total Downloads

5,570,634

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Jodit WYSIWYG Editor

Installation

Update editor version

Run demo

Usage

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

Jodit plugins

License

10

10

10

10

8

4

0

0

0

0

0

0

0

4.1

/10