Code Monkey home page Code Monkey logo

editor's Introduction

Editor

This is a WYSIWYG markdown editor using commands. The editor is based on slate.

Start

Install package

npm i wysiwyg-md-editor

Use editor

The package export an react component MdEditor,

MdEditor.propTypes = {
  value: String, // the initial markdown string
  onSave: Function(value: Markdown string), // callback function when press 'mod + s' to save content 
  refEditor: Function(editor: Editor), // ref the editor
  readOnly: Boolean, // is editor read only
};

Editor: {
  exec: Function, // execute command to edit
  getValue: Function, // get current markdown value
};
import MdEditor from 'wysiwyg-md-editor';

class Editor extends React.Component {

  refEditor = (editor) => {
    // cache the editor
    this.editor = editor;
  }

  onSave = (value) => {
    uploadMarkdwon(value);
  }

  render() {
    return (
      <MdEditor
        readOnly={false}
        refEditor={this.refEditor}
        onSave={this.onSave}
        value={'## initial content'}
      />
    );
  }
}

you can also use the component in a function component

Shortcut

Header shortcuts

The editor supprot the most part of markdown shortcut

# + SPACE header one

## + SPACE header two

....

###### + SPACE header six

List shortcuts

*/- + SPACE unorder list

1. + SPACE order list

TAB increase list item depth

SHIFT + ENTER insert a new paragraph in list item

ENTER insert new list item

SHIFT + TAB decrease list item depth

Mark shortcuts

content/content + SPACE bold

content SPACE code

content/content + SPACE italic

Code block shortcuts

``` + SPACE/SPACE*4 generate code block

TAB increase indent

ENTER insert a new code line

COMMAND/CTRL + ENTER exit code block

Quote shortcuts

> + SPACE generate a quote

ENTER exit qupte

Table shortcuts

ENTER insert table line

COMMAND/CTRL + ENTER exit table

TAB focus next table cell

SHIFT + TAB focus previous table cell

Save file

COMMAND/CTRL + S Save markdown content

Command

Set Header

set paragraph to header or header to paragraph

editor.exec({type: 'set_header', headerType: 'header_one/two.../paragraph'});

Set mark

set text to mark

  editor.exec({type: 'format_text', properties: {[ITALIC/CODE/BOLD]: true}});

Set block element

Set blockquote

// set current selection content to blockquote
this.editor.exec({type: 'set_blockquote'});
// set current blockquote to paragraph
editor.exec({type: 'unwrap_blockquote'});

Set code block

// unwrap current code block
editor.exec({type: 'unwrap_code_block'});
// wrap current selected content to code block
editor.exec({type: 'set_code_block'});

Set list

//  wrap current selected content to list
editor.exec({type: 'set_ordered_list/unordered_list'});
// unwrap list
editor.exec({type: `unwrap_ordered_list/unordered_list`});

Set table

// insert a new table
editor.exec({type: 'insert_table', data: {rowCount: Number, columnCount: Number});
// inset a new table column when selection is in table
editor.exec({type: 'insert_column'});

// remove a column
editor.exec({type: 'remove_column'});

// insert a new row
editor.exec({type: 'insert_row'});

// remove a table row
editor.exec({type: 'remove_row'});

// set current column align
editor.exec({type: 'set_table_cell_align', align: 'right'/'left'});

Set inline elements

Set link

// inset a link
editor.exec({ type: 'insert_link', {url, text}});

// set current selected link to text
editor.exec({type: 'unwrap_link'})

Set image

// insert image at selection
editor.exec({type: 'insert_image', data: {src: data.url}});

Clear format

clear all format

editor.exec({type: 'clear_format'});

Next

Supprot math formula and image upload

editor's People

Contributors

songjiaqi1 avatar

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.