Rich Text Editor
This is a rich text editor I created. It is built on the Draft.js framework for React. The Github repo for this demo is here. You can see other examples of my work at evmorrison.com.
Notable features include:
- support for tables
- insert and resize images
- insert and edit links
Output Preview - (non-contenteditable HTML generated by exporting the editor's internal content state)
This is some sample content for the rich text editor. It demonstrates paragraphs, custom block-level styling, the use of tables, and it has an image floated to the left of the next paragraph. Feel free to modify this content or delete it all and create you own.
You can click on this link or this link in the editor to see what they point to and edit them.
If you click on the image you can resize it. If you have the image selected, you can toggle float-left with cmd+L. To ensure you have the image selected rather than an adjacent paragraph, first click on the image to activate it - you'll see the dotted resize border appear - then click in the empty space between the dotted border and the image and the image will become selected.
You can give a paragraph some custom styling like this while in code view and it
will be preserved in editor view and in the html outpout.
| ABC Company 123 Circle Rd. Springfield, UT 84201 Phone: 801-233-3332 | XYZ Partners Ltd. 789 Circuit Ave. Anytown, UT 84111 Phone: 385-335-5555 |
| Sample Table | Column A | Column B | Column C |
|---|---|---|---|
| Criteria for passing | 50 | 37 | 44 |