Skip to content
📰 A text field that supports HTML editing. 📝
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
rollup.config.js

README.md

preact-richtextarea

NPM travis-ci

A <textarea> that supports HTML editing, powered by Preact & contentEditable.


Usage Example

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

import RichTextArea from 'preact-richtextarea';

const HtmlEditor = ({ html, ...props }) => (
	<form class="html">
		Body HTML:
		<RichTextArea value={html} {...props} />
	</form>
);

let html = `<h1>hello</h1><p>Testing 1 2 3...</p>`;
render(<HtmlEditor html={html} />, document.body);

Usage with Linked State

<RichTextArea /> works with Linked State exactly the same way as any other input field:

import RichTextArea from 'preact-richtextarea';

class Form extends Component {
	render({ }, { html }) {
		return (
			<form>
				<RichTextArea value={html} onChange={ this.linkState('html') } />
			</form>
		);
	}
}

render(<Form />, document.body);

License

MIT

You can’t perform that action at this time.