react-lz-editor

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

/**
* 感谢各位对本仓库的star和关注，以及提出的宝贵意见，万分抱歉没有及时跟进issue list，
* 本仓库最近着手使用ts进行重写，但会保持向下兼容，修复之前出现的问题，增加移动端适配等特性
*/

中文

react-lz-编辑器

一个开源的 React 富文本编辑器（现代 React 编辑器，支持文本、图片、视频、音频、链接等多种媒体），基于 Draft-Js 和 Ant-design 开发，良好支持 HTML、Markdown 和 Draft-raw 模式。它多语言支持良好，并欢迎您添加自己的语言支持。

在线演示

react-lz-editor: https://leejaen.github.io/react-lz-editor/index.html

演示页面禁用了媒体插入功能，因为目前没有在线 API 支持，这里是 Java 版本服务端 API 演示，您可能会需要。

安装

npm install react-lz-editor --save
OR
yarn add react-lz-editor

版本说明：需要 React 15.4.2 和 react-dom 15.4.2。建议项目中使用至少 2.8.3 及以上版本的 Antd。

Git

git+ssh://git@github.com/leejaen/react-lz-editor.git

用法与示例

clicking to code example

  import React from 'react';
  import ReactDOM from 'react-dom';
  import LzEditor from './editor/index.jsx'
  class Test extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        htmlContent: `<h1>Yankees, Peeking at the Red Sox, Will Soon Get an Eyeful</h1>
                  <p>Whenever Girardi stole a glance, there was rarely any good news for the Yankees. While Girardi’s charges were clawing their way to a split of their four-game series against the formidable Indians, the Boston Red Sox were plowing past the rebuilding Chicago White Sox, sweeping four games at Fenway Park.</p>`,
        markdownContent: "## HEAD 2 \n markdown examples \n ``` welcome ```",
        responseList: []
      }
      this.receiveHtml=this.receiveHtml.bind(this);
    }
    receiveHtml(content) {
      console.log("recieved HTML content", content);
      this.setState({responseList:[]});
    }
    render() {
      let policy = "";
      const uploadProps = {
        action: "http://v0.api.upyun.com/devopee",
        onChange: this.onChange,
        listType: 'picture',
        fileList: this.state.responseList,
        data: (file) => {

        },
        multiple: true,
        beforeUpload: this.beforeUpload,
        showUploadList: true
      }
      return (
        <div>
          <div>Editor demo 1 (use default html format ):
          </div>
          <LzEditor active={true} importContent={this.state.htmlContent} cbReceiver={this.receiveHtml} uploadProps={uploadProps}
          lang="en"/>
          <br/>
          <div>Editor demo 2 (use markdown format ):
          </div>
          <LzEditor
            active={true}
            importContent={this.state.markdownContent}
            cbReceiver={this.receiveMarkdown}
            image={false}
            video={false}
            audio={false}
            convertFormat="markdown"/>
        </div>
      );
    }
  }

  ReactDOM.render(
    <Test/>, document.getElementById('test'));

应用程序编程接口