❤
npm
Sign UpSign In

react-editor-markdown

1.0.6 • Public • Published

react-editor-markdown

一款简洁易用的React Markdown编辑器，基于 Marked.js、CodeMirror、Prism。

image-20190113000102183

Installation

npm install react-editor-markdown --save

Example

本地运行项目示例：

npm install
npm run dev

在浏览器中打开 localhost:3000 。

Usage

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Title</title>
    <!-- 需引用ali icon svg -->
    <script src="//at.alicdn.com/t/font_979167_zrlpqrk8y0o.js"></script> 
</head>
<body>
<div id="root"></div>
</body>
</html>
import React, { Component } from 'react';
import Editor from 'react-editor-markdown';
import 'react-editor-markdown/editor.css';
 
class App extends Component {
  constructor(props) {
    super(props);
  }
 
  onChange = ((newValue, newPreHtml) => {
    console.table({
      newValue,
      newPreHtml
    })
  }
  render() {
    const options = {
      value: 'hello editor markdown',
      toolbarIcons: [
        'bold', 'italic', 'separator', 
        'h1', 'h2', 'h3', 'h4', 'h5', 'separator',
        'quote', 'list', 'olist', 'separator',
        'link', 'image', 'separator',
        'watch', 'clear', 'save'
      ],
      isWatch: true,
      customToolbar: {
        save: {
          text: '保存',
          handler: function(){
            console.log('保存')
          }
        }
      },
    }
 
    return (
      <div className="app">
        <Editor 
          options={options}
          onChange={this.onChange}
        ></Editor>
      </div>
    );
  }
}
 
export default App;
 

Properties

className

编辑器类名

onChange

编辑器change事件，

用法：

onChange = (newValue, newPreHtml) => {
 
}

Options

  • Value string: markdown value
  • isWatch boolean: 是否实时预览
  • toolbarIcons array: 工具栏
  • customToolbar object: 自定义工具栏
  • onChange Function (newValue, newPreHtml): 编辑器change事件
value

初始化md的值

默认值： start editor now

isWatch

是否实时预览

默认值：true

toolbarIcons

工具栏设置，可按icon名称顺序排序，separator为分隔符|。

默认值：

[
  'bold', 'italic', 'separator', 
  'h1', 'h2', 'h3', 'h4', 'h5', 'separator',
  'quote', 'list', 'olist', 'separator',
  'link', 'image', 'separator',
  'watch', 'clear'
]
customToolbar

自定义toolbar

用法：

customToolbar: {
  save: {
    text: '保存',
    handler: function(){
      console.log('保存')
    }
  }
},

Readme

Keywords

Package Sidebar

Install

npm i react-editor-markdown

Repository

github.com/zgfang1993/react-editor-markdown

Homepage

github.com/zgfang1993/react-editor-markdown.git#readme

Weekly Downloads

8

Version

1.0.6

License

MIT

Unpacked Size

237 kB

Total Files

5

Last publish

Collaborators

  • zgfang1993
Try on RunKit
Report malware