https://github.com/dburrows/draft-js-basic-html-editor

Basic HTML editor using draft.js - html in, html out
https://github.com/dburrows/draft-js-basic-html-editor

Last synced: 3 months ago
JSON representation

Basic HTML editor using draft.js - html in, html out

• Host: GitHub
• URL: https://github.com/dburrows/draft-js-basic-html-editor
• Owner: dburrows
• License: mit
• Created: 2016-02-25T21:04:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-10-24T04:10:38.000Z (about 4 years ago)
• Last Synced: 2024-04-09T20:30:31.255Z (7 months ago)
• Language: JavaScript
• Size: 466 KB
• Stars: 87
• Watchers: 3
• Forks: 57
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-draft-js - Draft.js Basic HTML Editor - Accept html as its input format, and return html to an onChange. (Plugins and Decorators Built for Draft.js)

README

        
# draft-js-BasicHtmlEditor

Basic HTML editor using draft.js - html in, html out

Proof of concept currently, not production ready! PR's welcome.

Extends the Rich example from the Draft repo to accept html as its input format, and return html to an `onChange` handler.

### Tag Support

Block tags: `
 
 
 
 
 
 `


Inline tags: `    `


### Install

`$ npm install draft-js-basic-html-editor`

Note: You'll also need to install `react` and `react-dom` if you don't already have them

#### Webpack

The component is built without `react` or `react-dom` so you'll need to make sure that Webpack can resolve copies of both those modules. Either add your projects `node_modules` as fallback path:

```

resolve: {

  fallback:  path.resolve('./node_modules')

}

```

or create an alias for just those 2 modules

```

resolve: {

  alias: {

    'react': path.resolve('./node_modules/react'),

    'react-dom': path.resolve('./node_modules/react-dom'),

  }

```

### Usage 

```js

import BasicHtmlEditor from 'draft-js-basic-html-editor';

const MyEditor = () => {

  const initialHtml = 'hello, World';

  const onChange = html => console.log('updated', html);

  return (

    

  )

}

```

### Demo

http://dburrows.github.io/draft-js-basic-html-editor/example-dist/

#### Development

    $ npm install

    $ webpack-dev-server

#### To Do

* Block support ✔️

* Inline tag support ✔️

* Handle Lists with more than one element ✔️

* Tests ✔️

* Links ✔️

* Images

* Prod build ✔️