No Description
node ef9e2d194d feat: render task list 5 years ago
config feat: build lib 5 years ago
lib styles: add styles 5 years ago
public feat: init master 5 years ago
scripts feat: build lib 5 years ago
src styles: add styles 5 years ago
.gitignore feat: build lib 5 years ago
README.md 更新 'README.md' 5 years ago
package-lock.json feat: render task list 5 years ago
package.json feat: render task list 5 years ago
yarn.lock build 5 years ago

README.md

富文本及 Markdown 编辑器

基于 braft-editorreact-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

  • 图片上传示例