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} />
)
}
}
- 木偶组件的调用
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>
)
}
}
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, // 单双栏模式
}
参考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);