Skip to content
📰 A text field that supports HTML editing. 📝
JavaScript CSS
Branch: master
Clone or download
Latest commit 0b191bd Jan 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add fix and test for Firefox issue where "stylesheet" prop is ignored. Aug 22, 2017
test
.eslintignore Initial commit Dec 23, 2015
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json 1.2.1 Aug 22, 2017
rollup.config.js Update for preact 8, update dependencies May 15, 2017

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.