https://github.com/chanzuckerberg/czi-prosemirror
Rich Text Editor built with React and ProseMirror
https://github.com/chanzuckerberg/czi-prosemirror
prosemirror react rich-text-editor
Last synced: 8 months ago
JSON representation
Rich Text Editor built with React and ProseMirror
- Host: GitHub
- URL: https://github.com/chanzuckerberg/czi-prosemirror
- Owner: chanzuckerberg
- License: mit
- Created: 2018-11-06T01:06:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-07T20:41:19.000Z (over 2 years ago)
- Last Synced: 2025-03-30T02:06:06.032Z (8 months ago)
- Topics: prosemirror, react, rich-text-editor
- Language: JavaScript
- Homepage:
- Size: 5.04 MB
- Stars: 345
- Watchers: 21
- Forks: 62
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
***Notice: This project still under active development. API documentations will be available later.***
---
# CZI-ProseMirror · [](https://travis-ci.com/chanzuckerberg/czi-prosemirror)
+ Drop-In WYSIWYG editor based on ProseMirror & React
+ Live DEMO: http://cdn.summitlearning.org/assets/czi_prosemirror_0_0_1_1_20190509151928_index.html
---
## Getting Started
### Getting repository
```
git clone https://github.com/chanzuckerberg/czi-prosemirror.git
cd czi-prosemirror
npm install
```
### Install dependencies
```
cd czi-prosemirror
npm install
```
### Start the web server
```
# At the working directory `czi-prosemirror`
npm start
```
Test http://localhost:3001/ from your browser
### Build the distribution files
```
# At the working directory `czi-prosemirror`
npm run build:dist
```
## Development with React
```
import React from 'react';
import {createEmptyEditorState, EditorState, RichTextEditor} from 'czi-prosemirror';
class Example extends React.PureComponent {
constructor(props) {
super(props, context);
this.state = {
editorState: createEmptyEditorState(),
};
}
render() {
const {editorState, editorView} = this.state;
return (
);
}
_onChange = (editorState: EditorState): void => {
this.setState({editorState});
};
}
export default Example;
```
## Use it for your own project
This project still under active development. There will be NPM package published later.
For now, you can install using the commit hash to include the package to your own `package.json`.
For example:
```
npm install --save "chanzuckerberg/czi-prosemirror#8313aa0970b607c17019f7a5cc8df58c46e78916"
```
You may find the latest commit hash at https://github.com/chanzuckerberg/czi-prosemirror/commits/master