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: 2 months 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 (over 8 years ago)
• Default Branch: dev
• Last Pushed: 2022-08-15T06:55:39.000Z (almost 2 years ago)
• Last Synced: 2024-03-28T18:49:11.844Z (3 months 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

Lists

• 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)
• awesome-react-components - 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)
• awesome-react-components - 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)
• 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).