{"id":13681294,"url":"https://github.com/leejaen/react-lz-editor","last_synced_at":"2025-04-30T03:31:03.374Z","repository":{"id":16111050,"uuid":"77431919","full_name":"leejaen/react-lz-editor","owner":"leejaen","description":"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格式。 ","archived":false,"fork":false,"pushed_at":"2022-12-06T23:14:20.000Z","size":4169,"stargazers_count":948,"open_issues_count":104,"forks_count":153,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-19T01:31:02.262Z","etag":null,"topics":["ant-design","antd-editor","draft-js","react-editor","react-lz-editor","text-editor","web-editor"],"latest_commit_sha":null,"homepage":"https://leejaen.github.io/react-lz-editor/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leejaen.png","metadata":{"files":{"readme":"README.cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-27T06:32:40.000Z","updated_at":"2025-04-03T07:15:16.000Z","dependencies_parsed_at":"2023-01-13T20:30:32.295Z","dependency_job_id":null,"html_url":"https://github.com/leejaen/react-lz-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leejaen%2Freact-lz-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leejaen%2Freact-lz-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leejaen%2Freact-lz-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leejaen%2Freact-lz-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leejaen","download_url":"https://codeload.github.com/leejaen/react-lz-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251490167,"owners_count":21597564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd-editor","draft-js","react-editor","react-lz-editor","text-editor","web-editor"],"created_at":"2024-08-02T13:01:28.950Z","updated_at":"2025-04-30T03:31:02.245Z","avatar_url":"https://github.com/leejaen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components"],"sub_categories":["Themes"],"readme":"[ENGLISH](https://github.com/leejaen/react-lz-editor/blob/master/README.md)\n# react-lz-editor\n\nAn 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.\n\n一款基于 draft-Js 和 ant-design 实现的 react 富文本编辑器，支持文本、图片、视频、音频、链接等元素插入，同时支持HTML、markdown、draft-raw格式。\n\n## Live demo\n\n[react-lz-editor](https://leejaen.github.io/react-lz-editor/index.html)\n\nDisabled 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](https://github.com/leejaen/react-lz-editor/blob/master/java_demo/getQiniuUptoken.java) you may want.\n\n因为上传图片视频多媒体等文件需要后端服务器接口配合，这部分暂时没有实现在线demo接口，所以暂时通过配置去掉了，java版本接口实现示例请参考[示例代码](https://github.com/leejaen/react-lz-editor/blob/master/java_demo/getQiniuUptoken.java)。\n\n# Install\n```\nnpm install react-lz-editor --save\nOR\nyarn add react-lz-editor\n```\n\n\nVersion 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.\n\n版本号说明：react、react-dom 版本必须在15.4.2以上，Antd版本最好在2.8.3以上。\n\n# Git\n    git+ssh://git@github.com/leejaen/react-lz-editor.git\n\n# Usage \u0026 Examples\n\n  ``` js\n  import React from 'react';\n  import ReactDOM from 'react-dom';\n  // import {LzEditor} from './index'\n  import hmacsha1 from \"hmacsha1\";\n  import {Base64} from \"js-base64\";\n  import md5 from \"md5\";\n  import findIndex from \"lodash/findIndex\";\n  import uniqBy from \"lodash/uniqBy\";\n  import LzEditor from './editor/index.jsx'\n  class Test extends React.Component {\n    constructor(props) {\n      super(props);\n      this.state = {\n        htmlContent: \"\",\n        markdownContent: \"## 二级标题 HEAD 2 \\n markdown 格式示例 \\n ``` 欢迎使用 ```\",\n        rawContent: '{\"entityMap\":{\"0\":{\"type\":\"image\",\"mutability\":\"IMMUTABLE\",\"data\":{\"src\":\"https://image.qiluyidian.mobi/4305350813991067' +\n            '8747.jpg\"}},\"1\":{\"type\":\"image\",\"mutability\":\"IMMUTABLE\",\"data\":{\"src\":\"https://image.qiluyidian.mobi/430535081399106787' +\n            '47.jpg\"}}},\"blocks\":[{\"key\":\"fr2lj\",\"text\":\"正文示例\",\"type\":\"header-one\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[]' +\n            ',\"data\":{}},{\"key\":\"90kdv\",\"text\":\"一度金融的消息称，乐视金融同数码视讯的接触尚处在高层范围内进行，因此对于收购价格，暂时还不能确定。\",\"type\":\"unstyled\",\"depth\":0,\"inlin' +\n            'eStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"b60ni\",\"text\":\"如果乐视金融拿下数码视讯的两张金融牌照，并且在到期后能够获得央行审核顺利延期，意味着乐视可以通过移动设' +\n            '备和电视两个终端来链接用户的银行卡。\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}},{\"key\":\"eui4h\",\"text' +\n            '\":\"乐视金融在去年11月份首度公开亮相的时候，缺少银行和支付两张关键牌照就一直是外界关注的问题。\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],' +\n            '\"data\":{}},{\"key\":\"29t6l\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"lengt' +\n            'h\":1,\"key\":0}],\"data\":{}},{\"key\":\"7ujeo\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],' +\n            '\"data\":{}},{\"key\":\"3n9d4\",\"text\":\" \",\"type\":\"atomic\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[{\"offset\":0,\"lengt' +\n            'h\":1,\"key\":1}],\"data\":{}},{\"key\":\"9r0k2\",\"text\":\"\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],' +\n            '\"data\":{}}]}',\n        responseList: []\n      }\n      this.receiveHtml = this.receiveHtml.bind(this);\n      this.receiveMarkdown = this.receiveMarkdown.bind(this);\n      this.receiveRaw = this.receiveRaw.bind(this);\n      this.onChange = this.onChange.bind(this);\n      this.beforeUpload = this.beforeUpload.bind(this);\n      this.getSignature = this.getSignature.bind(this);\n      this.getPolicy = this.getPolicy.bind(this);\n    }\n    receiveHtml(content) {\n      console.log(\"recieved HTML content\", content);\n      this.setState({responseList:[]});\n    }\n    componentDidMount() {}\n    receiveMarkdown(content) {\n      console.log(\"recieved markdown content\", content);\n    }\n    receiveRaw(content) {\n      console.log(\"recieved Raw content\", content);\n    }\n    onChange(info) {\n      // console.log(\"onChange:\", info);\n      // console.log(\"upload onChange this.state.files\",this.state.files,info)\n      let currFileList = info.fileList;\n\n      currFileList = currFileList.filter((f) =\u003e (!f.length));\n      let url = \"http://devopee.b0.upaiyun.com\";\n      //读取远程路径并显示链接\n      currFileList = currFileList.map((file) =\u003e {\n        if (file.response) {\n          // 组件会将 file.url 作为链接进行展示\n          file.url = url + file.response.url;\n        }\n        if (!file.length) {\n          return file;\n        }\n      });\n      let _this = this;\n      //按照服务器返回信息筛选成功上传的文件\n      currFileList = currFileList.filter((file) =\u003e {\n        //根据多选选项更新添加内容\n        let hasNoExistCurrFileInUploadedList = !~findIndex(_this.state.responseList, item =\u003e item.name === file.name)\n        if (hasNoExistCurrFileInUploadedList) {\n          if (!!_this.props.isMultiple == true) {\n            _this.state.responseList.push(file);\n          } else {\n            _this.state.responseList = [file];\n          }\n        }\n        return !!file.response || (!!file.url \u0026\u0026 file.status == \"done\") || file.status == \"uploading\";\n      });\n      currFileList = uniqBy(currFileList, \"name\");\n      if (!!currFileList \u0026\u0026 currFileList.length != 0) {\n        // console.log(\"upload set files as fileList\", currFileList);\n        this.setState({responseList: currFileList});\n      }\n      _this.forceUpdate();\n    }\n    beforeUpload(file) {\n      console.log(\"beforeUpload like\", file);\n    }\n    getSignature(fileName) {\n      let now = new Date();\n      let h = hmacsha1('19931944122b23f77681b6ab765648f8', 'POST\u0026/upyun-temp/' + fileName + '\u0026' + now);\n      let Signature = Base64.encode(h);\n      return Signature;\n    }\n    getPolicy(fileName) {\n      let now = new Date();\n      let afterHour = new Date(now.getTime() + 1 * 60 * 60 * 1000); //过期时间1小时后\n      let policy = Base64.encode(JSON.stringify({\n        \"bucket\": \"devopee\",\n        \"save-key\": \"/\" + fileName,\n        \"expiration\": Math.round(afterHour.getTime() / 1000),\n        \"date\": now\n      }));\n      return policy;\n    }\n    render() {\n      const uploadConfig = {\n        QINIU_URL: \"http://up.qiniu.com\", //上传地址，现在暂只支持七牛上传\n        QINIU_IMG_TOKEN_URL: \"http://www.yourServerAddress.mobi/getUptokenOfQiniu.do\", //请求图片的token\n        QINIU_PFOP: {\n          url: \"http://www.yourServerAddress.mobi/doQiniuPicPersist.do\" //七牛持久保存请求地址\n        },\n        QINIU_VIDEO_TOKEN_URL: \"http://www.yourServerAddress.mobi/getUptokenOfQiniu.do\", //请求媒体资源的token\n        QINIU_FILE_TOKEN_URL: \"http://www.yourServerAddress.mobi/getUptokenOfQiniu.do?name=patch\", //其他资源的token的获取\n        QINIU_DOMAIN_IMG_URL: \"https://image.yourServerAddress.mobi\", //图片文件地址的前缀\n        QINIU_DOMAIN_VIDEO_URL: \"https://video.yourServerAddress.mobi\", //视频文件地址的前缀\n        QINIU_DOMAIN_FILE_URL: \"https://static.yourServerAddress.com/\", //其他文件地址前缀\n      }\n\n      let policy = \"\";\n\n      //uploadProps 配置方法见 https://ant.design/components/upload-cn/\n      const uploadProps = {\n        action: \"http://v0.api.upyun.com/devopee\",\n        onChange: this.onChange,\n        listType: 'picture',\n        fileList: this.state.responseList,\n        data: (file) =\u003e { //自定义上传参数，这里使用UPYUN\n          return {\n            Authorization: \"UPYUN reactlzeditor:\" + this.getSignature(file.name),\n            policy: (() =\u003e {\n              policy = this.getPolicy(file.name);\n              return policy;\n            })(),\n            signature: md5(policy + '\u0026pLv/J4I6vfpeznxtwU+g/dsUcEY=')\n          }\n        },\n        multiple: true,\n        beforeUpload: this.beforeUpload,\n        showUploadList: true\n      }\n      return (\n        \u003cdiv\u003e\n          \u003cdiv\u003eEditor demo 1 (use default html format ):\n          \u003c/div\u003e\n          \u003cLzEditor active={true} importContent={this.state.htmlContent} cbReceiver={this.receiveHtml} uploadProps={uploadProps}/\u003e\n          \u003cbr/\u003e\n          \u003cbr/\u003e\n          \u003cdiv\u003eEditor demo 2 (use markdown format ):\n          \u003c/div\u003e\n          \u003cLzEditor\n            active={true}\n            importContent={this.state.markdownContent}\n            cbReceiver={this.receiveMarkdown}\n            image={false}\n            video={false}\n            audio={false}\n            convertFormat=\"markdown\"/\u003e\n          \u003cbr/\u003e\n          \u003cbr/\u003e\n          \u003cdiv\u003eEditor demo 3 (use Raw format ):\n          \u003c/div\u003e\n          \u003cLzEditor\n            active={true}\n            importContent={this.state.rawContent}\n            cbReceiver={this.receiveRaw}\n            uploadConfig={uploadConfig}\n            image={false}\n            video={false}\n            audio={false}\n            convertFormat=\"raw\"/\u003e\n        \u003c/div\u003e\n      );\n    }\n  }\n\n  ReactDOM.render(\n    \u003cTest/\u003e, document.getElementById('test'));\n\n  ```\n\n![示例](https://image.qiluyidian.mobi/54541628992197066868.png)\n\n# API\n| 配置项 | 类型 | 默认值 | 说明 |\n| -- | -- | -- | -- |\n| active | bool | false | 有更新时是否刷新 |\n| importContent | string | \"\" | 编辑器显示内容 |\n| cbReceiver | function | null | 编辑器内容更新后的回调函数，此函数接受一个改动后的返回参数值 |\n| undoRedo | bool | true | 是否启用撤销恢复功能，默认启用 |\n| removeStyle | bool | true | 是否启用移除格式功能，默认启用 |\n| pasteNoStyle | bool | true | 是否启用文本粘贴功能，默认启用 |\n| blockStyle | bool | true | 是否启用段落样式设置功能（H1、列表、区段等），默认启用 |\n| alignment | bool | true | 是否启用文本对齐设置功能，默认启用 |\n| inlineStyle | bool | true | 是否启用文字样式设置功能（加粗、倾斜、下划线等），默认启用 |\n| color | bool | true | 是否启用文字颜色设置功能，默认启用 |\n| image | bool | true | 是否启用图片上传后插入功能，默认启用 |\n| video | bool | true | 是否启用视频上传后插入功能，默认启用 |\n| audio | bool | true | 是否启用音频上传后插入功能，默认启用 |\n| urls | bool | true | 是否启用添加删除链接功能，默认启用 |\n| autoSave | bool | true | 是否启用自动保存功能，默认启用 |\n| fullScreen | bool | true | 是否启用全屏功能，默认启用 |\n| disabled | bool | false | 是否禁用编辑器所有功能 |\n| convertFormat | string | \"html\" | 设置内容导入导出格式，支持html、markdown、raw三种格式，默认html |\n| uploadConfig | object | null | 启用媒体上传后插入功能时，上传参数配置对象（上传到七牛，无需配置uploadProps） |\n| uploadProps | object | null | 自定义上传方法及上传设置（无需配置uploadConfig，同时配置uploadConfig和uploadProps，则uploadProps优先），[API请参考Antd.Upload](https://ant.design/components/upload-cn/) |\n# QA\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleejaen%2Freact-lz-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleejaen%2Freact-lz-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleejaen%2Freact-lz-editor/lists"}