Newfangled Package Modernizer

    @platzi/editor

    1.0.0 • Public • Published

    Simple Draft-js

    Minimal wysiwyg rich editor using draftjs (Rich editor framework for React).

    Demo

    http://platzidev.github.io/simple-draftjs/

    Install

    npm i -S simple-draftjs
    

    How to use?

    import React from 'react';
    import { render } from 'react-dom';
    import Editor from 'simple-draftjs';
    
    const buttons = [
      { name: 'bold' },
      { name: 'italic' },
      { name: 'underline' },
      { name: 'separator' },
      { name: 'unordered-list' },
      { name: 'separator' },
      { name: 'image' },
      { name: 'link' },
      { name: 'unlink' },
      { name: 'separator' },
      { name: 'code' },
    ];
    
    /** optional css icons:
    const buttons = [
      { name: 'bold' },
      { name: 'italic' },
      { name: 'underline' },
      { name: 'separator' },
      { name: 'unordered-list', icon: 'icon-list' },
      { name: 'separator' },
      { name: 'image', icon: 'icon-image'},
      { name: 'link', icon: 'icon-link'},
      { name: 'unlink', icon: 'icon-unlink' },
      { name: 'separator' },
      { name: 'code', , icon: 'icon-code' },
    ];
    **/
    
    
    render(
      <Editor
        getContentAction={printHTML}
        hideButtonAction={closeEditor}
        placeholder={"do somenthing!"}
        controls={controls}
      />,
      document.getElementById('root')
    );
    
    function printHTML(content) {
      console.log("func ok");
    }
    
    function closeEditor() {
      console.log("close");
    }

    Options

    Options should be set via props

    Option (prop) type description required
    getContentAction function callback that return html or markdown content when "send" button is clicked or the state change *
    placeholder string Placeholder for empty editor -
    controls array list of elements to show as button options -
    export stirng Format for return. options: HTML, Markdown -
    messages Object text for buttons -
    inactive boolean block editor if it is true -
    inactiveStyle object CSS React object for inactive state -
    hideButtonAction func callback for 'cancel' button click event -

    getContentAction (required)

    [function] callback that return html or markdown content when "send" button is clicked or the state change

    function getContent(content) {
        console.log("html content", content); // <p>something</p>
    }
    <Editor getContentAction={getContent} />

    placeholder (optional)

    [string] placeholder.

    controls (optional)

    [array] list of elements to show as button options Note: separator is the line for serparate items "|"

    export default [
      { name: 'bold' },
      { name: 'italic' },
      { name: 'underline' },
      { name: 'separator' },
      { name: 'unordered-list' },
      { name: 'separator' },
      { name: 'image' },
      { name: 'link' },
      { name: 'unlink' },
      { name: 'separator' },
      { name: 'code' },
    ];
    
    <Editor controls={controls} />

    export (optional)

    [option: "html", "markdown"] default: "html"

    messages (optional)

    default:

    messages: {
      buttons: {
        send: 'Send',
        cancel: 'Cancel',
      }
    },
    

    How to Run?

    npm install
    npm start
    open http://localhost:3002
    

    Contribute: https://github.com/jhta/simple-draftjs

    Dependencies

    Install

    npm i @platzi/editor

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • platziteam
    • sampol18
    • gndx
    • developersoul