https://github.com/developit/preact-richtextarea

:newspaper: A text field that supports HTML editing. :memo:
https://github.com/developit/preact-richtextarea

Last synced: 3 months ago
JSON representation

:newspaper: A text field that supports HTML editing. :memo:

• Host: GitHub
• URL: https://github.com/developit/preact-richtextarea
• Owner: developit
• License: mit
• Created: 2015-12-23T19:48:14.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-01-17T20:03:14.000Z (over 7 years ago)
• Last Synced: 2025-04-10T11:16:10.866Z (3 months ago)
• Language: JavaScript
• Homepage: http://npm.im/preact-richtextarea
• Size: 18.6 KB
• Stars: 42
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-preact - Preact Richtextarea - Simple HTML editor component. (Uncategorized / Uncategorized)

README

        
# preact-richtextarea

[![NPM](http://img.shields.io/npm/v/preact-richtextarea.svg)](https://www.npmjs.com/package/preact-richtextarea)

[![travis-ci](https://travis-ci.org/developit/preact-richtextarea.svg)](https://travis-ci.org/developit/preact-richtextarea)

A `` that supports HTML editing, powered by [Preact] & contentEditable.

---

### Usage Example

Use `` like a normal ``. It supports the same props/attributes, including `value`, `onInput()` and `onChange()`.

```js

import RichTextArea from 'preact-richtextarea';

const HtmlEditor = ({ html, ...props }) => (

	

		Body HTML:

		

	

);

let html = `
hello
Testing 1 2 3...
`;

render(, document.body);

```


### Usage with Linked State

`` works with Linked State exactly the same way as any other input field:

```js

import RichTextArea from 'preact-richtextarea';

class Form extends Component {

	render({ }, { html }) {

		return (

			

				

			

		);

	}

}

render(, document.body);

```

---

### License

[MIT]

[Preact]: https://github.com/developit/preact

[MIT]: http://choosealicense.com/licenses/mit/