leejaen / React Lz Editor
Licence: mit
A multilingual react rich-text editor component 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. 一款基于 draft-Js 和 ant-design 实现的 react 富文本编辑器组件,支持文本、图片、视频、音频、链接等元素插入,同时支持HTML、markdown、draft Raw格式。
Stars: ✭ 894
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Lz Editor
React Text Selection Popover
Selection based Text UI made easy
Stars: ✭ 245 (-72.6%)
Mutual labels: text-editor, draft-js
Mui Rte
Material-UI Rich Text Editor and Viewer
Stars: ✭ 233 (-73.94%)
Mutual labels: text-editor, draft-js
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+668.9%)
Mutual labels: text-editor
Ng Zorro Antd Mobile
A configurable Mobile UI components based on Ant Design Mobile and Angular. 🐜
Stars: ✭ 709 (-20.69%)
Mutual labels: ant-design
Kodexplorer
A web based file manager,web IDE / browser based code editor
Stars: ✭ 5,490 (+514.09%)
Mutual labels: text-editor
Ant Design
An enterprise-class UI design language and React UI library
Stars: ✭ 76,498 (+8456.82%)
Mutual labels: ant-design
Ved
1 MB text editor written in V with hardware accelerated text rendering. Compiles in <1s.
Stars: ✭ 888 (-0.67%)
Mutual labels: text-editor
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (-22.15%)
Mutual labels: text-editor
Sakura
SAKURA Editor (Japanese text editor for MS Windows)
Stars: ✭ 689 (-22.93%)
Mutual labels: text-editor
Filterlists
🛡 The independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances.
Stars: ✭ 653 (-26.96%)
Mutual labels: ant-design
Novelwriter
novelWriter is an open source markdown-like plain text editor designed for writing and organising novels. Written with Python 3 (3.6+) and Qt 5 (5.3+) for cross-platform deployment.
Stars: ✭ 739 (-17.34%)
Mutual labels: text-editor
React Draft Wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
Stars: ✭ 5,434 (+507.83%)
Mutual labels: draft-js
React Design Editor
React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs
Stars: ✭ 687 (-23.15%)
Mutual labels: ant-design
Vim Quickui
The missing UI extensions for Vim 8.2 (and NeoVim 0.4) !! 😎
Stars: ✭ 714 (-20.13%)
Mutual labels: text-editor
/**
* 感谢各位对本仓库的star和关注,以及提出的宝贵意见,万分抱歉没有及时跟进issue list,
* 本仓库最近着手使用ts进行重写,但会保持向下兼容,修复之前出现的问题,增加移动端适配等特性
*/
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 and welcome you add your language supports.
Language Contributors
Li Zhen | Li Zhen | Boris Chernysh | SibaService.inc | Quốc Khánh | This JJ |
English | Chinese (S. & T.) | Russian | Japanese | Vietnamese | Thai |
Live demo
react-lz-editor: https://leejaen.github.io/react-lz-editor/index.html
Disabled media insert feature on demo page, because of there was no online API support for the time being, here is The server side API demo in java you may want.
Install
npm install react-lz-editor --save
OR
yarn add react-lz-editor
Version note: React 15.4.2+ and react-dom 15.4.2+ is required. Antd version at least from 2.8.3 in your project is recommended.
Git
git+ssh://[email protected]/leejaen/react-lz-editor.git
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 |
audio | bool | true | Enabled insert audio 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" |
disabled | bool | false | Disabled editor or not |
uploadProps | object | null | Customize uploading settings. API: Antd.Upload |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].