react-mysoft-wysiwyg

    1.12.16 • Public • Published

    React Draft Wysiwyg

    A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page.

    Build Status

    Features

    • Configurable toolbar with option to add/remove controls.
    • Option to change the order of the controls in the toolbar.
    • Option to add custom controls to the toolbar.
    • Option to change styles and icons in the toolbar.
    • Option to show toolbar only when editor is focused.
    • Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
    • Support for block types: Paragraph, H1 - H6, Blockquote, Code.
    • Support for setting font-size and font-family.
    • Support for ordered / unordered lists and indenting.
    • Support for text-alignment.
    • Support for coloring text or background.
    • Support for adding / editing links
    • Choice of more than 150 emojis.
    • Support for mentions.
    • Support for hashtags.
    • Support for adding / uploading images.
    • Support for aligning images, setting height, width.
    • Support for Embedded links, flexibility to set height and width.
    • Option provided to remove added styling.
    • Option of undo and redo.
    • Configurable behavior for RTL and Spellcheck.
    • Support for placeholder.
    • Support for WAI-ARIA Support attributes
    • Using editor as controlled or un-controlled React component.
    • Support to convert Editor Content to HTML, JSON, Markdown.
    • Support to convert the HTML generated by the editor back to editor content.
    • Support for internationalization.

    Installing

    The package can be installed from npm react-draft-wysiwyg

    Getting started

    Editor can be used as simple React Component:

    import { Editor } from 'react-draft-wysiwyg';
    import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
    <Editor
      editorState={editorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      onEditorStateChange={this.onEditorStateChange}
    />

    Docs

    For more documentation check here.

    Questions Discussions

    For discussions join public channel #rd-wysiwyg in DraftJS Slack Organization.

    Thanks

    Original motivation and sponsorship for this work came from iPaoo. I am thankful to them for allowing the Editor to be open-sourced.

    License

    MIT.

    Keywords

    none

    Install

    npm i react-mysoft-wysiwyg

    DownloadsWeekly Downloads

    11

    Version

    1.12.16

    License

    MIT

    Unpacked Size

    610 kB

    Total Files

    121

    Last publish

    Collaborators

    • wuyafeijs