wowlusitong / re-editor Goto Github PK

View Code? Open in Web Editor NEW

419.0 7.0 39.0 748 KB

一个开箱即用的React富文本编辑器 🚀re-editor

Home Page: https://re-editor.netlify.com

License: MIT License

JavaScript 90.17% CSS 9.53% HTML 0.31%

react slate slate-editor editor ant ant-design re-editor rich rich-text-editor wysiwyg

re-editor's Introduction

re-editor ·

一个开箱即用的React富文本编辑器 🚀

使用方法
- 开箱即用-提供 antd 风格工具栏
- 自定义-只引入编辑器核心，可定制工具栏
常见问题
支持的功能

特点

开箱即用，无需配置
定制化，可自行开发任意风格和形式的工具条 [API补全中]
支持元素功能设置，例如修改图片大小
支持markdown语法
查看更多

使用方法

编辑器为适应不同开发需求，提供下面两种使用方法

开箱即用

re-editor是一个封装好的组件, 安装就可以使用, 它里面包含 @re-editor/core 和 @re-editor/toolbar-antd, 工具条默认使用antd风格，如果要使用其他工具条请参考下面自定义文档

安装依赖

$ npm install re-editor

引入样式

在js里面引入

import 're-editor/lib/styles/index.css'

也可以在css里面引入(需要css预处理支持)

@import 're-editor/lib/styles/index.css'

props

属性	说明	类型
value	编辑器的值	object
onChange	编辑器更改内容的回调	(value: Value) => void
placeholder	占位文本	string
readOnly	只读模式	boolean
onImageUpload	自定义图床	(file: File) => Promise<url: string>
tools	设置工具栏的显示内容	Array<Array

设置工具栏显示内容

tools props支持数组形式，如果是二维数组会分组显示

tools={['bold', 'italic', 'underline', 'strikethrough']}
// 或者
tools={[
  ['bold', 'italic', 'underline', 'strikethrough'],
  ['orderedlist', 'unorderedlist']
]}

名称	功能
bold	粗体
italic	斜体
underline	下划线
strikethrough	删除线
orderedlist	有序列表
unorderedlist	无序列表
heading	标题
align	对齐方式
image	图片
table	表格
code	代码
undo	撤销
redo	重做
fullscreen	全屏

自定义

编辑器拆分为两个部分，内容编辑区域和工具条，下面介绍如何自定义工具条

安装编辑器核心

$ npm install @re-editor/core

创建工具条

可以用任何方式创建编辑器工具条，需要将编辑器的实例传给工具条，可参考 re-editor 和 @re-editor/toolbar-antd的实现，详情查看API文档(这部分文档还没写完，会在近期补全😂)

例如实现一个加粗功能:

import { command } from '@re-editor/core';

const Demo = (props) => {
  function handleClick() {
    command(props.editor)('bold')
  }
  return <div onClick={handleClick}>bold</div>
}

packages介绍

re-editor: 一个封装好的，包含工具条的编辑器
@re-editor/core: 编辑器核心
@re-editor/toolbar-antd: 基于antd制作的工具条，默认
@re-editor/examples: 演示项目

FAQ

和slate或draft-js对比有什么区别?

slate或draft并不是一个纯编辑器，它们更像是一个用于构建编辑器的框架，re-editor是基于slate开发，让你不必关注构建编辑器的过程。

怎么修改样式

样式分为两部分，node(粗体、h1、h2等)和工具栏，它们都可以通过css重写基础样式，工具栏也可以做到完全重写样式可以通过css自定义

每次保存数据量太大怎么办？

使用增量更新，onChange回调的value是 immutable格式，可以使用immutable-js-diff等方法获取diff的内容进行增量更新

如何指定上传图片服务器

图片默认保存为base64，如果需要将图片上传到指定服务器，可使用onImageUpload函数， (file: File) => Promise<url: string> 示例代码

功能

文字装饰

粗体 斜体 下划线 删除线 上标 下标

列表

有序列表 无序列表

对齐方式

左对齐 右对齐 居中对齐 两端对齐

标题

h1 h2 h3 h4 h5 h6

其他

图片
- 设置大小
- 从剪贴板复制
- 支持自定义上传图片服务器地址
表格
- 增加行
- 增加列
- 删除行
- 删除列
代码高亮
- js
- css
- html
markdown
- h1-h6: #
- 引用: >
- 有序列表: -
- 无序列表: 1.
全屏编辑

其他功能持续增加中...

re-editor's People

Contributors

Stargazers

Watchers

re-editor's Issues

支持选中图片后使用delete按键删除

https://re-editor.netlify.com/

我在上面官方给出的测试地址测试了，我现在在编辑器里输入了一段文字，然后再上传一张图片，现在要把上传的这张图片放到其他位置是不行的，还有用backspace键删除图片会出错

删除所有内容后，再点击上传图片，无法展示图片

re-editor readOnly模式下表格显示问题

readOnly模式下，期望页面不可编辑，但是目前发现，当页面显示表格时，鼠标点击表格，依旧能弹出编辑框

表格可以支持合并拆分单元格吗

REACT HOOKS下从后端获取文本后没办法渲染？

异步从后端获取文本后不能够成功渲染，文本框始终是空的

export const Editor = () => {
    const [value, setValue] = useState(null);
   
    useEffect(() => {
        httpRequest("get", api.NoticeManage).then(response=>{
            setValue(JSON.parse(response.data.text))
        })
    }, [])
    
    const handleChange = (value) => {
        setValue(JSON.stringify(value.toJS()))
    }
    return (
        <ReEditor
            value={value}
            onChange={handleChange}
            placeholder="请输入内容"
            // onImageUpload={this.handleImageUpload}
        />
    )
}