1.0.0 • Published 6 years ago
react-bx-editor v1.0.0
react-lz-editor
An open source react rich-text editor ( mordern react editor includes media support such as texts, images, videos, audios, links etc. ), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode. It's supports multiple languages well(English, Chinese and Russian for now) and welcome you add your language supports.
Install
npm(cnpm) install react-qsx-editor --save
OR
yarn add react-qsx-editor
Version note: React 15.4.2+ and react-dom 15.4.2+ is required. Antd version at last 2.8.3 in your project is recommended.
Usage & Examples
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'));
API
props | type | default | description |
---|---|---|---|
active | bool | false | Is reloading content after changing |
importContent | string | "" | Editor content value, default to "" |
lang | string | "" | Editor using language, default to your browser language settings |
cbReceiver | function | null | Callback function, the changed value will be sent to its parameter. |
undoRedo | bool | true | Enabled undo and redo feature, default to true |
removeStyle | bool | true | Enabled remove style feature, default to true |
pasteNoStyle | bool | true | Enabled paste plan text feature, default to true |
blockStyle | bool | true | Enabled block style (H1,ol,pre etc.) feature, default to true |
alignment | bool | true | Enabled text alignment feature, default to true |
inlineStyle | bool | true | Enabled inline style (bold, italic, underline etc.) feature, default to true |
color | bool | true | Enabled color text feature, default to true |
image | bool | true | Enabled insert image feature, default to true |
video | bool | true | Enabled insert video feature, default to true |
urls | bool | true | Enabled add hyper link feature, default to true |
autoSave | bool | true | Enabled auto save to draft-box feature, default to true |
fullScreen | bool | true | Enabled full screen feature, default to true |
convertFormat | string | "html" | Set support format (html, markdown, raw) , default to "html" |
uploadProps | object | null | Customize uploading settings. API: Antd.Upload |
1.0.0
6 years ago