Code Monkey home page Code Monkey logo

draft-editor's Introduction

draft-editor

This is an implementation of draft-js which includes some controls for toggling a lot of the rich text features that are in draft-js. It's not much more than a combination of a lot of the examples that are around for draft-js. However, it has:

  • Buttons for inline and block
  • hyperlinks, images, audio, and video (with a modal popup interface)
  • keyboard shortcuts

installation

npm install --save rich-draftjs-editor

usage

import RichEditor from 'rich-draftjs-editor';

<RichEditor readOnly={true} />

The only property is the boolean readOnly. If this is false (and it is by default), it will render the controls (above) the editor.

Currently, the controls are all from bootstrap's glyphicons. This is a limitation that should be changed in the future, but at the moment, it's necessary to include bootstrap's css seperately.

There's also some css included in this project which will improve/give some default styles for the classes. Right now, the css classes are also not module prefixed/very unique (which is another issue). This file is at src/style-controls.css.

Another possible extension is composing the current components with more properties (for example, making the buttons in the style-controls or the controls component as default params so they could be overriden).

These CSS limitations kind of limit this, but it should serve as a good example of some of the features in draft-js if nothing else.

draft-editor's People

Forkers

fudanfuhua

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.