React富文本——markdown编辑器_for-editor

---

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

React集成（for-editor）markdown富文本编辑器
github地址
for-editor演示

---

• 安装

yarn安装 yarn add for-editor
npm安装 npm install for-editor

• 封装React木偶组件

	import React from 'react';
	import Editor from 'for-editor';
	
	export default class ForEditor extends React.Component {
	
	    constructor(props) {
	        super(props)
	        this.state = {
	          value: ''
	        }
	      }
	
	      componentDidMount(){
	        this.props.onRef(this);
	    }
	
	      handleChange = (value)=> {
	        this.setState({
	          value
	        })
	      }
	
	      handleSave = ()=>{
	        return this.state.value;
	      }
	
	    render(){
	        const { value } = this.state
	        return(
	             <Editor 
	                height={this.props.height}
	                preview={this.props.preview}
	                value={value} 
	                onSave={this.handleSave}
	                onChange={this.handleChange} />
	        )
	    }
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

• 木偶组件的调用

	import React,{Component} from 'react';
	
	import ForEditor from '../../components/ForEditor'
	import './index.less';
	import { Button } from 'antd';
	
	export default class MarkDownEdit extends Component {
	
	    constructor(props){
	        super(props);
	        this.state = {
	            
	        }
	    }
	
	    markdownRef = (ref) =>{
	        this.markdown = ref;
	    }
	
	    //绑定快捷键
	    componentDidMount(){
	        document.addEventListener("keydown", this.onKeyDown)
	      }
	    
	      componentWillUnmount(){
	        document.removeEventListener("keydown", this.onKeyDown)
	      }
	
	      onKeyDown = (e) => {
	        switch( e.keyCode) {
	          case 13://回车事件
	            break
	          case 83:
	              if(e.ctrlKey){
	                  this.handleSave();
	              }
	        }
	      }
	
	
	    /**
	     * 保存
	     */
	    handleSave = ()=>{
	        let artile = this.markdown.handleSave();
	        alert(artile);
	    }
	
	    render(){
	        return(
	            <div className="editor-container">
	                <ForEditor
	                    onRef={this.markdownRef}
	                    preview={false}
	                    height="500px"
	                    />
	                <Button onClick={this.handleSave}>保存</Button>
	            </div>
	        )
	    }
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

---

for-editor Api

toolbar配置

/*
  默认工具栏按钮全部开启, 传入自定义对象
  例如: {
    h1: true, // h1
    code: true, // 代码块
    preview: true, // 预览
  }
  此时, 仅仅显示此三个功能键
  注:传入空对象则不显示工具栏
 */

toolbar: {
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: true, // 预览
  expand: true, // 全屏
  /* v0.0.9 */
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  /* v0.2.3 */
  subfield: true, // 单双栏模式
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

参考https://github.com/kkfor/for-editor

---

补充:（获取html） 在调用组件的保存方法时，只能拿到state的value值，也就是markdown文本，但是当我们需要获取对应的html内容时，需要引入marked工具类。

npm add marked
或者
npm install marked

获取html内容的方法:
let html = marked（this.state.value）；