comment(评论模块)

2021-08-06 by uino 165 技术组件

效果展示

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,为了解决跨域问题,正确请求到评论接口的数据,所以需要修改开发环境的protocol(协议)和本地hosts文件

安装mkcert

  • mac系统: 这里默认你已安装了homebrew,如果还没安装,请看下这篇文章
brew install mkcert   

将CA证书加入本地可信CA

mkcert -install

生成ca文件,以我自己开发时为例(local.uino.com),注意主域一定要用uino.com,例如:wikilcoal.uino.com。

mkcert local.uino.com

这样就为local.uino.com生成了证书(ca)

配置ca文件

在项目根目录新建一个ca文件夹,把刚刚生成的ca文件,复制进去 image.png

配置webpack

image.png

host:local.uino.com,
port: 443,
https:{
         key: fs.readFileSync("./ca/local.uino.cn-key.pem"),
         cert: fs.readFileSync("./ca/local.uino.cn.pem"),
         ca: fs.readFileSync("./ca/local.uino.cn.pem"),
       },

host:第三步生成的域名,port:固定443,https:根目录下ca文件的路径

如果你是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.com,
port: 443,
https:{
         key: fs.readFileSync("./ca/local.uino.cn-key.pem"),
         cert: fs.readFileSync("./ca/local.uino.cn.pem"),
         ca: fs.readFileSync("./ca/local.uino.cn.pem"),
       },

修改本地hosts文件

找到你本地的hosts文件,mac系统一般在/etc/hosts ,windows系统一般在C:\Windows\System32\drivers\etc\hosts,注意,请用管理员权限打开hosts文件,然后文件的最后一行添加配置如图: 9351628480577_.pic_hd_副本.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[] [ ]
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

方法

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 ----