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
[](https://www.npmjs.com/package/preact-richtextarea)
[](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/