Megadraft

Rich Text editor built on top of Facebook's draft.js (Work in Progress)

This fork changes

1. Additional toolbar buttons: Underlined text, Stroke text, Inline code, Code block, H3, H4

2. Sidebar adding can be managed with showSidebar option:

   <MegadraftEditor
       editorState={this.state.editorState}
       showSidebar={false}
       onChange={::this.onChange} />

3. Changeable themes. Just add theme styles like this:

   .toolbar.white-thin-theme {
       ... your styles
   }

   and specify the theme on editor initializing

   <MegadraftEditor
       editorState={this.state.editorState}
       theme='white-thin'
       onChange={::this.onChange} />

4. White thin theme

5. Allow to submit images from hard drive to remote server. Originally only URLs are supported.

   <MegadraftEditor
       ...
       submitFileUrl={this.props.submit_file_url} />

   submitFileUrl route should accept POST requests with file passed in a parameter named file and return JSON object containing status and url to stored image. Example response:

   { 
       status: 'success', 
       body: 'http://stored-image.url'
   }

6. Allow to hide "Rights Holder" input line on data blocks. Is hidden by default, to enable:

   <MegadraftEditor
       ...
       showDataRightsHolder={true} />

7. Respect readOnly option on data blocks. In readOnly mode Caption input is non-editable and control buttons are hidden.

8. Respect chosen data block size. Small is 40% wide, Medium is 70% wide and Big is full-width.

9. Allow to attach YouTube and Vimeo videos. Originally only direct video urls are supported.

Discussion and Support

Join the #megadraft channel on the DraftJS Slack team!

Live Example & Documentation

Checkout our website with a live demo!

Developing

To run the development server and see the examples:

git clone https://github.com/globocom/megadraft.git
cd megadraft/
make setup
make run

Then visit http://localhost:8080/website/#/dev on your browser.

To run local tests:

make unit

To lint local source files:

make lint

To run tests and lint:

make test

Dependencies

Megadraft depends on Sass to build style assets.

Importing the default styles

Megadraft ships with a default styling available at this location in the installed package: node_modules/megadraft/dist/css/megadraft.css.

Documentation

• Overview & Usage
• Customization
• Custom Entities
• Plugins
• Saving & Loading

Plugins

Checkout the docs for information about plugin structure. To help in this process there is a Yeoman Megadraft Plugin Generator.

License

Megadraft is licensed under the MIT license.

Third Party

The Megadraft website uses a picture from Stocksnap.io by Tim Marshall licensed under CC0 license.

Landing page uses a Megadeth picture by Ted Van Pelt licensed under CC-BY.