You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3 vuotta sitten
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. # React Draft Wysiwyg
  2. A Wysiwyg editor built using ReactJS and DraftJS libraries.
  3. [Demo Page](https://jpuri.github.io/react-draft-wysiwyg).
  4. [![Build Status](https://travis-ci.org/jpuri/react-draft-wysiwyg.svg?branch=master)](https://travis-ci.org/jpuri/react-draft-wysiwyg)
  5. ![](http://i.imgur.com/tU7kJ6i.gif)
  6. ## Features
  7. - Configurable toolbar with option to add/remove controls.
  8. - Option to change the order of the controls in the toolbar.
  9. - Option to add custom controls to the toolbar.
  10. - Option to change styles and icons in the toolbar.
  11. - Option to show toolbar only when editor is focused.
  12. - Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
  13. - Support for block types: Paragraph, H1 - H6, Blockquote, Code.
  14. - Support for setting font-size and font-family.
  15. - Support for ordered / unordered lists and indenting.
  16. - Support for text-alignment.
  17. - Support for coloring text or background.
  18. - Support for adding / editing links
  19. - Choice of more than 150 emojis.
  20. - Support for mentions.
  21. - Support for hashtags.
  22. - Support for adding / uploading images.
  23. - Support for aligning images, setting height, width.
  24. - Support for Embedded links, flexibility to set height and width.
  25. - Option provided to remove added styling.
  26. - Option of undo and redo.
  27. - Configurable behavior for RTL and Spellcheck.
  28. - Support for placeholder.
  29. - Support for WAI-ARIA Support attributes
  30. - Using editor as controlled or un-controlled React component.
  31. - Support to convert Editor Content to HTML, JSON, Markdown.
  32. - Support to convert the HTML generated by the editor back to editor content.
  33. - Support for internationalization.
  34. ## Installing
  35. The package can be installed from npm `react-draft-wysiwyg`
  36. ```
  37. $ npm install --save react-draft-wysiwyg draft-js
  38. ```
  39. ## Getting started
  40. Editor can be used as simple React Component:
  41. ```js
  42. import { Editor } from 'react-draft-wysiwyg';
  43. import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
  44. <Editor
  45. editorState={editorState}
  46. toolbarClassName="toolbarClassName"
  47. wrapperClassName="wrapperClassName"
  48. editorClassName="editorClassName"
  49. onEditorStateChange={this.onEditorStateChange}
  50. />
  51. ```
  52. ## Docs
  53. For more documentation check [here](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp).
  54. ## Questions Discussions
  55. For discussions join public channel #rd_wysiwyg in [DraftJS Slack Organization](https://draftjs.herokuapp.com/).
  56. ## Thanks
  57. Original motivation and sponsorship for this work came from [iPaoo](http://www.ipaoo.com/). I am thankful to them for allowing the Editor to be open-sourced.
  58. ## License
  59. MIT.