Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fritx/react-editor
Pure Rich-text Editor with TS & React-hooks
https://github.com/fritx/react-editor
content-editable editor hooks react rich-text
Last synced: 7 days ago
JSON representation
Pure Rich-text Editor with TS & React-hooks
- Host: GitHub
- URL: https://github.com/fritx/react-editor
- Owner: fritx
- Created: 2016-01-02T16:42:06.000Z (almost 9 years ago)
- Default Branch: dev
- Last Pushed: 2022-08-15T06:55:39.000Z (about 2 years ago)
- Last Synced: 2024-10-11T22:16:02.304Z (23 days ago)
- Topics: content-editable, editor, hooks, react, rich-text
- Language: TypeScript
- Homepage: http://fritx.github.io/react-editor/
- Size: 689 KB
- Stars: 55
- Watchers: 6
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - react-editor - Simple richtext editor that can insert images and HTML. (UI Components / Form Components)
- awesome-react - react-editor - Simple richtext editor that can insert images and HTML.  (UI Components / Form Components)
- awesome-react-components - react-editor - Simple richtext editor that can insert images and HTML. (UI Components / Form Components)
- fucking-awesome-react-components - react-editor - Simple richtext editor that can insert images and HTML. (UI Components / Form Components)
README
# react-editor is FINALLY RETURNED !!
> It's been over 4 years...
> Now react-editor is BACK with fully TS & REACT-HOOKS integrated
- [x] Rich-text Editor with TS & React-hooks
- [ ] Polyfill workaround with React < 16.8
- [x] Placeholder via CSS
- [x] Methods: focus(), insertHTML(s), insertText(s)
- [x] Auto saveRange, restoreRange, moveToEnd
- [x] Usage of value/onChange, defaultValue/onChange
- [x] In-web-image, File handleDrop
- [ ] processHTML, processText wip
- [x] 1.x Legacy: https://github.com/fritx/react-editor/tree/1.x
- [x] 2.0-alpha Demo: https://fritx.github.io/react-editor
```sh
npm i -S react-editor
```
```tsx
import { Editor } from 'react-editor'
let [value, setValue] = useState('')
let ref = useRef()
ref.focus()
ref.insertText('foo')
ref.insertHTML('
')
value = 'set content'
```
#### Props
```tsx
export interface EditorProps {
value?: string;
defaultValue?: string;
className?: string;
placeholder?: string;
allowInWebDrop?: boolean;
processHTML?: (html: string) => string;
processText?: (text: string) => string;
onFocus?: (e: React.FocusEvent) => void;
onBlur?: (e: React.FocusEvent) => void;
onDrop?: (e: React.DragEvent) => void;
onPaste?: (e: React.ClipboardEvent) => void;
onChange?: (value: string) => void;
[restProp: string]: any; // onto
}
export interface EditorRefAttrs {
focus: () => void;
insertHTML: (html: string) => void;
insertText: (text: string) => void;
}
```
**for umd / \ usage**
```html
<script src="https://unpkg.com/react">
```
```js
// myapp.js
let React = window.React;
let ReactDOM = window.ReactDOM;
let { Editor } = window.ReactEditor;
ReactDOM.render(, mountNode);
```
**for react < 16.8 we need hooks polyfill workaround**
```tsx
// todo
```
**for react-editor legacy version**
```sh
npm i -S [email protected]
```
---
This project was bootstrapped with [create-react-library](https://github.com/transitive-bullshit/create-react-library) & [react-ts-demo](https://github.com/fritx/react-ts-demo).