node ed51f5b850 fix: xss | 6 年 前 | |
---|---|---|
lib | 6 年 前 | |
public | 6 年 前 | |
src | 6 年 前 | |
.babelrc | 6 年 前 | |
.eslintrc | 6 年 前 | |
.gitignore | 6 年 前 | |
CHANGELOG.md | 6 年 前 | |
README.md | 6 年 前 | |
config-overrides.js | 6 年 前 | |
package.json | 6 年 前 |
通用评论系统及编辑器
version 0.4.0
import Comment, { Editor, RenderText } from 'comment';
props | type | default | required | description |
---|---|---|---|---|
type | number | true | 评论的 type | |
businessId | string | true | 评论的 business id | |
API | string | http://api.links123.net/comment/v1 | false | API 前缀 |
showList | boolean | true | false | 是否显示评论列表 |
showEditor | boolean | true | false | 是否显示评论输入框 |
showHeader | boolean | true | false | 是否显示评论顶部的提示 |
showAlertComment | boolean | false | false | 评论成功之后,是否通过 Antd 的 Message 组件进行提示 |
showAlertReply | boolean | false | false | 回复成功之后,是否通过 Antd 的 Message 组件进行提示 |
showAlertFavor | boolean | false | false | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示 |
token | string | false | [deprecate] token,用于身份认证,非必须。默认使用 cookie |
props | type | default | required | description |
---|---|---|---|---|
rows | number | 5 | false | 编辑器的高度。默认情况下,回复评论/回复回复的编辑器会比评论的编辑器高度小一行 |
placeholder | string | 说点什么吧… | false | 评论的中的提示文字 |
showEmoji | boolean | true | false | 是否显示 Toolbar 中表情工具 |
showUpload | boolean | true | false | 是否显示 Toolbar 中 上传图片工具 |
maxUpload | number | 1 | false | 最大能够上传的图片数量 |
value | string | false | 编辑器的值。如果设置了该属性,则编辑器变为受控组件,需要父组件来维护 value | |
onChange | function(value) | false | 编辑器内容改变的回调函数 | |
onSubmit | function({ text, files }) | false | 点击提交按钮的回调函数,text 为编辑器的文本,files 为上传的文件列表 | |
btnSubmitText | string | 发表 | false | 提交按钮的文字 |
btnLoading | boolean | false | false | 按钮是否正在加载中 |
btnDisable | boolean | false | false | 按钮是否禁用 |
button | ReactNode | false | 按钮组件。如果上面几个 btn 相关的属性都无法满足要求,则可以使用 button 来自定义提交编辑器值的按钮 | |
emojiToolIcon | ReactNode | false | Toolbar 中表情的图标 | |
imageToolIcon | ReactNode | false | Toolbar 中上传文件的图标 | |
onRef | function | false | 传递子组件的引用 |
如果将 comment
作为通用评论组件,则不要使用 value
onChange
onSubmit
。因为组件内部,实现了通用评论的业务逻辑。
可以使用 value/onChange/onSubmit 的情况:
Editor
。即 import { Editor } from 'comment'
showList: false
// 单独使用 Editor
<Editor value={this.state.value} onChange={(v) => this.setState({ value })} />
// 不需要展示评论列表
<Comment type={1} showList={false}>
<Editor value={this.state.value} onChange={(v) => this.setState({ value })} />
</Comment>
如果使用 button
,则 btnLoading
btnDisable
btnSubmitText
都会失效。因为这些属性是针对于编辑器默认的提交按钮设置的。
所以如果要提交编辑器的值,需要自己在 Button
组件上实现提交功能。编辑器的值,可以通过 onChange
方法获取到。
如果使用了 button
属性,并且没有为其设置 onClick
方法,则 onClick
默认为发布评论,即点击按钮会发表评论:
// 如下代码所示
// 点击“自定义按钮”的时候,会发表评论。这是由 Comment 组件内部实现的业务逻辑
<Comment type={1} businessId="test" showList={false}>
<Editor
button={(
<Button
type="primary"
ghost
>
自定义按钮
</Button>
)}
/>
</Comment>
如果使用了 button
属性,并且设置了 onClick
方法,则会覆盖默认的 onClick
方法:
// 下面的代码,点击的时候,不会提交评论
// 而是会输出 state 的值(
// 即编辑器的值,因为 onChange 将编辑器输入的值通过回调函数传递给了父组件)
<Comment type={1} businessId="test" showList={false}>
<Editor
button={(
<Button
type="primary"
ghost
onChange={(value) => this.setState({ value })}
onClick={() => console.log(this.state.value)}
>
自定义按钮
</Button>
)}
value={this.state.value}
/>
</Comment>
如果你需要在父组件里面调用子组件的方法,就可以使用 onRef
。主要是用于调用 Editor 组件内部的 resetState
方法。
如果你需要在父组件里面,手动清空 Editor 里面的数据,则可以使用 resetState
。因为即使父组件传入了 value
, Editor 内部也会保存一份 value
的值,用于 onSubmit
回调将值传递给父组件。所以可能存在,当子组件值没有清除,而父组件的 value
为空的情况,导致编辑器中文字和实际预想的不一致。所以当在父组件里面使用了 value
并重置 value
的时候,最好清空 Editor 的 state。
具体使用方式如下:
handleChangeSubmit() {
// 点击按钮,调用 onSubmit 的时候,清空 Editor 的数据
this.editor.resetState();
}
<Comment type={1} businessId="test">
<Editor
// 使用 onRef 方法创建一个 Editor 组件的引用,并添加到 this 上面
onRef={ref => this.editor = ref }
onSubmit={() => this.handleChangeSubmit()}
/>
</Comment>
注意上面的 onRef={ref => this.editor = ref }
,这是实现父组件调用子组件方法的关键。**
import { RenderText } from 'comment';
render() {
return RenderText('test [呲牙]')
}
# npm 安装
$ npm install git+https://git.links123.net/npm/comment.git --save
# yarn 安装
$ yarn add git+https://git.links123.net/npm/comment.git
然后在代码里面引入 comment
组件:
import Comment, { Editor } from 'comment'
// ...
render() {
return (
<Comment type={1} businessId="test">
<Editor />
</Comment>
)
}
注意:最后,还需要在 HTML 文件里面引入阿里云 OSS SDK <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
作为静态文件使用的话,首先需要在 index.js
里面设置好组件的 props
,主要是 type
和 businessId
:
// ...
<App type={1} businessId="test">
<Editor />
</App>
然后再进行打包:
$ yarn build
打包后会得到静态文件,分别通过 link 和 script 标签在你的项目里面引入打包后的文件。
接下来还需要引入 OSS SDK,用于直传文件到 OSS。
最后创建一个 id 为 root-comment
的标签,作为渲染通用评论的跟元素。
如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.f205c84d.css" />
</head>
<body>
<div id="root-comment" style="width: 700px"></div>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
<script src="./static/js/main.eac872df.js"></script>
</body>
</html>
$ git clone https://git.links123.net/npm/comment
$ cd comment
$ yarn
$ yarn start
yarn build
将项目打包成一个单页应用yarn lib
将项目打包成一个 es5 组件yarn prettier
优化代码格式https://links123-images.oss-cn-hangzhou.aliyuncs.com/avatar/