editor/README.md

富文本及 Markdown 编辑器

基于 braft-editor 和 react-mde 封装的富文本及 Markdown 编辑器。

以下给出简单的使用说明，详细接口请查看对应的文档。

install

$ npm install git+https://git.links123.net/node/editor.git --save
# or
$ yarn add git+https://git.links123.net/node/editor.git

使用

RichEditor

import React from 'react'
import { RichEditor } from 'editor';

const { EditorState } = RichEditor;

export default class RichEditorDemo extends React.Component {

    state = {
        // 创建一个空的editorState作为初始值
        editorState: EditorState.createFrom('')
    }

    async componentDidMount () {
        // 假设此处从服务端获取html格式的编辑器内容
        const htmlContent = await fetchEditorContent()
        const htmlContent = '<h1>ss</h1>'
        // 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
        this.setState({
            editorState: EditorState.createFrom(htmlContent)
        })
    }

    submitContent = async () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML()
        const result = await saveEditorContent(htmlContent)
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    render () {

        const { editorState } = this.state
        return (
            <div>
                <RichEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )

    }

}

• defaultProps:

props	type	value
controls	array

const controls = [ 'headings', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
      'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'separator',
            'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
                'link', 'separator', 'hr', 'separator',
                'media', 'separator',  'undo', 'redo' ]

MarkdownEditor

import React from "react";
import { MarkdownEditor } from 'editor';

export default class MarkdownEditorDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            mdeState: null,
        };
        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});
    }

    handleValueChange = (mdeState) => {
        this.setState({mdeState});
    }

    render() {
        return (
            <MarkdownEditor
                onChange={this.handleValueChange}
                editorState={this.state.mdeState}
            />
        );
    }
}

• default props:

props	type	value
layout	string	‘horizontal’
buttonContentOptions	object
generateMarkdownPreview	func

const icons = {
    "bold": <FontAwesomeIcon icon="bold" />,
    "heading": <FontAwesomeIcon icon="heading" />,
    "italic": <FontAwesomeIcon icon="italic" />,
    "strikethrough": <FontAwesomeIcon icon="strikethrough" />,
    "link": <FontAwesomeIcon icon="link" />,
    "quote-right": <FontAwesomeIcon icon="quote-right" />,
    "code": <FontAwesomeIcon icon="code" />,
    "image": <FontAwesomeIcon icon="image" />,
    "list-ul": <FontAwesomeIcon icon="list-ul" />,
    "list-ol": <FontAwesomeIcon icon="list-ol" />,
    "tasks": <FontAwesomeIcon icon="tasks" />,
  };

const iconProvider = (name) => {
  return icons[name] || "❓";
};
  

const defaultProps = {
        layout: 'horizontal',
        buttonContentOptions: { iconProvider },
        generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),
}

TODO

• 图片上传示例