comment(评论模块)

效果展示

Aug-19-2021 10-22-18.gif

说明

1. 你不需要额外的写任何代码,就能在你的项目里引入评论模块

2.你的项目发版上线,不会影响到评论模块

3.评论模块的数据保存在数字办的数据库中,你不需要担心数据的丢失

使用

1.引入 comment.js 脚本文件

<script src="https://comment.uino.com/comment.js"></script>

2.在html放一个 div 标签 id 可以自定义

<div id="comment-box"></div>

3.在脚本里调用 commentRender()

 <script>  
     commentRender(id [, options]); 
 </script>

tips: 注意事项

1.开发环境需做的配置

由于开发环境一般是http://localhost,为了解决跨域问题,正确请求到评论接口的数据,所以需要修改devServer.hostname和本地hosts文件

配置webpack

devserver

host: local.uino.local,
port: 80,

host: 以xxx.uino.local格式 ,port:80

如果你是react的项目,上面配置最后一步(host/port/https配置),你可能用不到,这时,你需要导出webpack的配置文件,一般是npm run eject,然后在项目根目录下,新建一个.env文件,如图:
image.png
配置和上面的最后一步大概一样。

如果你是vue的项目,在vue.config.js(如果没有,请新建一个),参考https://cli.vuejs.org/zh/config/#vue-config-js, 然后在devServer加入如下配置:

host:local.uino.local,
port: 80,

修改本地hosts文件

找到你本地的hosts文件,mac系统一般在/etc/hosts ,windows系统一般在C:\Windows\System32\drivers\etc\hosts,注意,请用管理员权限打开hosts文件,然后文件的最后一行添加配置如图:
image.png

配置完后,就可以使用命令,npm run dev(根据自己的项目而定,一般在package.json文件的scripts字段),查看效果了。

2. 当在typescript项目里遇到下列报错

image.png

请在.d.ts文件里加入如下代码

interface Ioptions{ 
    dataId?:string; 
    includeParams?:string[] 
    isRemainHash?:boolean 
} 
declare function commentRender(id: string, options?:Ioptions) {} 
 </script>

参数

id

参数名 是否必须 描述 类型 默认值
id 需要插入到指定区域的dom id; 这里是"comment-box" string ----

options

参数名 是否必须 描述 类型 默认值
dataId 唯一id,为防止评论数据的丢失,建议加上这个参数 设置这个参数后,includeParams,isRemainHash将不再生效 sting ----
includeParams 当要保留参数时,把需要保留的参数列表传递过来。默认会去除url中参数 Array [ ]
isRemainHash 是否保留url中hash,默认会去除 boolean false
addrs 评论后需要通知的人的邮箱 string[] [ ]
belongTo 属于评论还是问道 “comment” 或"question" “comment”
userInfo 个人信息 [] {“user_id":644,“email”:"wuxin@uino.com”,“nickname”:“”,“realname”:“吴昕”,“username”:“wuxin”,“phone”:“13718323283”,“avatar”:“https://wework.qpic.cn/wwhead/duc2TvpEgSQO4BpE0WZSZ8KQKRlB3Gh9Kp2BKjLCIRlJYnsibPAAhmDHwOfubXITic4Aq5wHTrPXM/0",“last_login”:“2021-09-22T09:54:17.229980+08:00”,“internal”:true,"enable”:true}
staffs 员工信息列表,用户@员工 [] [ {“user_id":1,“email”:"zhangsan@uino.com”,“nickname”:“”,“realname”:“张三”,“username”:“zhangsan”,“phone”:“12345678901”,“avatar”:“https://aaa.png”,“last_login”:“2021-04-25T18:35:57.284754+08:00”,“internal”:true,“enable”:true},…]
avatarClick 点击头像和名字后的回调,默认跳到gitlab个人信息页 function null
onWordMouseOver(row) 鼠标移入划词评论区域的回调,row是当前评论的数据 function null
onWordMouseOut(row) 鼠标移出划词评论区域的回调,row是当前评论的数据 function null
onAfterComment 划词评论后的回调 function null
onCommentDidMount 评论加载完后的回调 function null

方法

textCommentShow(options),选择划词后,显示输入框

参数名 是否必须 描述 类型 默认值
top 划词后,显示的输入框距离body顶部的距离 number ----
left 划词后,显示的输入框距离body左的距离 number ----
selection 划词相关参数,具体看下表 object {text: “”,idxSection: [],articalId:“”,paragraph:“”,}

selection

参数名 是否必须 描述 类型 默认值
text 划词区域 string “”
idxSection 划词区域在全局的索引 number[] []
articalId 文章id string “”
paragraph 划词区域所在的段落的文字 string “”

textCommentHide(), 关闭划词后显示的输入框

sideCommentShow(options), 显示对应段落的划词评论

参数名 是否必须 描述 类型 默认值
top 划词后,显示的输入框距离body顶部的距离 number ----
left 划词后,显示的输入框距离body左的距离 number ----
paragraphToMd5 划词区域所在的段落的文字转成md5,用于标记段落 string ----

sideCommentHide(option),隐藏对应段落的划词评论

参数名 是否必须 描述 类型 默认值
paragraphToMd5 划词区域所在的段落的文字转成md5,用于标记段落 string ----

updateSelection(options,cb),文章编辑修改后,划词被修改了(idxSelection,selection变了,都算更改)

options

参数名 是否必须 描述 类型 默认值
id 划词评论的id string ----
selectionModify 划词是否被更改(idxSelection,selection变了,都算更改) boolean ----
selection 划词区域 string ----
idxSection 划词区域在全局的索引 number[] ----
paragraph paragraph string ----

cb 更新成功后的回调

参数名 是否必须 描述 类型 默认值
err 更新失败的实参 string ----

updateSelection(options,cb) 文章编辑修改后,划词没被修改,但是段落被修改了

options

参数名 是否必须 描述 类型 默认值
oldParagraph 旧的段落文字 string ----
newParagraph 新的段落文字 string ----

cb 更新成功后的回调

参数名 是否必须 描述 类型 默认值
err 更新失败的实参 string ----

getTextComment(id),获取划词评论列表

参数名 是否必须 描述 类型 默认值
id 文章id string ----

window.addEventListener(“message”, fn, false);

参数名 是否必须 描述 类型 默认值
fn 参数是划词评论列表 function ----

getCommentsCountById(options), 根据userId和评论的id列表获取对应的文章评论数

options

参数名 是否必须 描述 类型 默认值
userId userId string ----
ids 文章id数组 string[] ----

findCommentsByHostname(hostname),根据域名查找评论数

参数

参数名 是否必须 描述 类型 默认值
hostname 页面的域名 string ----