tinymce富文本编辑器做评论区

"react": "^16.13.1",
"@tinymce/tinymce-react": "^3.14.0",

// 你换成你自己想要追加图片的地址
import addCommentIcon from '@assets/imgs/Comment/add-comment.png';{// 在toolbar中追加配置 addCommentButton showCommentArea ，这俩个都是我们在setup里面注册的按钮【其他加粗、字体大小那些在这里忽略了】toolbar: 'addCommentButton showCommentArea',setup: (editor) => {// 追加自定义icon - addCommenteditor.ui.registry.addIcon('addComment',`addCommentIcon}' />`,);// 在toolbar中追加ICON - 添加评论的按钮 - customCommentButtoneditor.ui.registry.addButton('addCommentButton', {type: 'contextformbutton',icon: 'addComment', // 使用自定义的icononAction: () => {},});// 在toolbar中追加按钮 - 控制评论区的显示与否editor.ui.registry.addButton('showCommentArea', {type: 'contextformbutton',text: 'Show/Hide comment',onAction: () => {},});},}}
/>

// 是否展示评论区
const [commentAreaIsShow, setCommentAreaIsShow] = useState(false);JSON.stringify(commentAreaIsShow)}style={{ display: commentAreaIsShow ? 'block' : 'none' }}
>{ height: '60vh', overflowY: 'auto' }}>{commentsLoading && }{/* view comment */}{commentList.map((item) => (item.commentId} {...item} {...commentPublicParams} />))}

然后我们改一下刚才注册的tinymce的setup里面的showCommentArea的onAction

特殊说明：在tinymce的setup里面取不到最新的state，想取得需要重新渲染编辑区，会导致富文本区域闪烁，所以这里通过获取dom的自定义属性获取值取反进行更改。

// 控制评论区的显示与否
editor.ui.registry.addButton('showCommentArea', {type: 'contextformbutton',text: 'Show/Hide comment',onAction: () => {const commentArea = document.getElementById('rich-editor-comment-wrapper',);const show = JSON.parse(commentArea.getAttribute('data-show'));setCommentAreaIsShow(!show);},
});

3.选择文字然后添加评论

①对应的样式以及意义

选中文字 -> 点击add Comment的那个icon然后就会看到右侧评论区加了一个添加评论项

②对应的代码实现【忽略了一切非实现该功能的代码】

定义一个addItemInfo、如果有的话那就显示添加comment的组件。

// 当前add的信息
const [addItemInfo, setAddItemInfo] = useState({});// 在刚才的评论区的div里面加一个判断，如果有addItemInfo的话就显示新增评论的Comment元素。
// addComment固定显示在第一个
{ height: '60vh', overflowY: 'auto' }}>{commentsLoading && }{/* 添加comment - 单独放在最上面 */}{addItemInfo?.id && (...addItemInfo}setAddItemInfo={setAddItemInfo}{...commentPublicParams}/>)}{/* view comment */}{commentList.map((item) => (item.commentId} {...item} {...commentPublicParams} />))}

改一下刚才tinymce的setup里面的命令

// 追加自定义命令
editor.addCommand('addComment', (ui, v) => {// 获取选中的内容const selectionText = editor.selection.getContent();if (selectionText) {const uuid = uuid4NoDash(); // 你可以自己用其他方法生成一个uuid// 把刚才选中的内容替换成新的内容：加了一个下划线标识，然后加了一个ideditor.insertContent(`uuid}"style="border-bottom: 1px solid orangered;">${editor.selection.getContent({ format: 'text' })}`);// 添加comment,id和text是后续调后端接口存数据库用的，type是给comment组件用的setAddItemInfo({ id: uuid, type: 'add', text: selectionText });// 这里把评论区固定展示出来setCommentAreaIsShow(true);} else {// 这里用的antd的message，如果没选择文案的话这边抛个提示message.warn('Please select a sentence to add a comment.');}
});// 添加评论的按钮
editor.ui.registry.addButton('customCommentButton', {type: 'contextformbutton',icon: 'addComment',onAction: () => {editor.editorManager.execCommand('addComment');},
});

Comment组件代码详见下方全部代码当中的公共代码

4.取消添加评论

在AddComment里面的cancel按钮的点击事件进行如下处理，下方代码可在全部代码->公共组件Comment中找到

5.点击左侧富文本内容【有评论的元素】右侧评论区滚动到对应的评论

// 删除已有的高亮的comment标记样式
function removeMarkComment() {// 将已有的高亮样式删除const Ele = document.getElementsByClassName('current_selected_comment')[0];if (Ele) {Ele.classList.remove('current_selected_comment');}
}(event, editor) => {const currentEle = editor.selection.getNode();const currentEleId = currentEle.getAttribute('id');const targetEle = document.getElementById(`comment_item_${currentEleId}`,);removeMarkComment();if (targetEle) {// 滚动到对应评论区的位置targetEle.scrollIntoView({ behavior: 'smooth' });// 追加类名，高亮对应区域targetEle.classList.add('current_selected_comment');}}}
/>

6.删除评论\编辑评论\回复评论\标记评论

这四个属于具体业务逻辑，与富文本编辑器添加comment其实是没太大关系的，可自行在下发代码中查看对应的逻辑

三、完整的代码

1.公共代码

①Comment组件

/*** @note* 评论组件【添加、编辑、展示】* @param {*  type     : 'add' | 'edit' | 'view' - 添加、编辑、查看*  id       : string     -   每个评论的唯一id，id是前端生成的uuid*  content  : string     -   评论的内容*  date     : string     -   评论的日期*  user     : string     -   评论人*  replyList: [params]   -   回复列表* }* @author Di Wu* @returns ReactComponent*/
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Checkbox, Badge } from 'antd';
import { cloneDeep } from 'lodash';
import { Button } from 'appkit-react';
import { PWCInput } from '@components';
import { ConfirmModal } from '@components/ConfirmModal';
import { formatDate } from '@utils';
import { API } from '@service';
import {changeCurrentToNewMode,excludeTypeIsEqualToReply,handleAddReply,cancelReply,
} from '../../dataProcessor';
import './index.scss';import EditCommentIcon from '@assets/imgs/Comment/edit-comment.png';
import DeleteCommentIcon from '@assets/imgs/Comment/delete-comment.png';// comment的header部分
function CommentHeader({user,date,type,email,loginUserInfo = {},channel,commentId,projectId,setCommentsLoading,commentList,setCommentList,getAgendaCommentData,
}) {// 是否展示删除确认的modalconst [showModal, setShowModal] = useState(false);return (
{user}{formatDate(date)}
{/* 用这条内容的email和当前登录人的email判断是否一致，一致才展示编辑还有删除按钮 */}{type === 'view' && loginUserInfo.email === email && (
EditCommentIcon}style={{ marginRight: 12 }}onClick={() => {// 点击edit的时候把所有的reply删除掉const commentListV2 = excludeTypeIsEqualToReply({ commentList });// 将comment变成编辑模式const newCommentList = changeCurrentToNewMode({commentList: commentListV2,commentId,newType: 'edit',});setCommentList(newCommentList);}}/>DeleteCommentIcon} onClick={() => setShowModal(true)} />
)}{/* 删除确认的modal */}async () => {setShowModal(false);setCommentsLoading(true);// 调删除接口const res = await API.deleteAgendaComment({});// 重新获取comment数据getAgendaCommentData();setCommentsLoading(false);}}handleClickCancel={() => setShowModal(false)}modalVisible={showModal}type="WARNING"width={580}// Do you want to delete this comment ?content={
Do you want to delete this comment thread?
}cancelText="CANCEL"okText="DELETE"/>
);
}// 新增一个reply的输入框
function ReplyComment(props) {const {commentList,setCommentList,commentId,getAgendaCommentData,projectId,userInfo,component,identifier,channel,setCommentsLoading,} = props;const [currentEditVal, setCurrentEditVal] = useState('');return (<>
currentEditVal}onChange={(e) => setCurrentEditVal(e.target.value)}/>
 
() => {// 删除这个replyconst newCommentList = cancelReply({ commentList, commentId });setCommentList(newCommentList);}}>Cancelasync () => {console.log('currentEditVal: ',commentId,'--',currentEditVal,props,);try {setCommentsLoading(true);// 调用reply接口，然后成功之后reloadconst res = await API.createAgendaComment({});getAgendaCommentData();setCommentsLoading(false);} catch (err) {console.log('!!!!', err);}}}>Comment
);
}// comment的reply部分的渲染
function renderReplyList({ replyList, ...props }) {const renderReplyItemObj = ({ item }) =>({view: (<>...props} {...item} />
{item.content}
),edit: false} {...props} {...item} />,reply: ...props} {...item} />,}[item.type]);return replyList?.map?.((item) => (
item.commentId} className="reply-item-box">{renderReplyItemObj({ item })}
));
}// comment的foother部分
function CommentFoother(props) {const {commentList,setCommentList,showReply,commentId,projectId,userInfo,channel,identifier,getAgendaCommentData,setCommentsLoading,} = props;return (
false}onChange={async () => {try {setCommentsLoading(true);// 调用resolve接口，然后成功之后reloadconst res = await API.editAgendaComment({});getAgendaCommentData();setCommentsLoading(false);} catch (err) {console.log('!!!!', err);}}}/>{' '}Mark as resolved
{/* 判断是否显示，如果这一组的最后一个的type==='reply'那就不显示 */}{showReply && (() => {// 点击edit的时候把所有的reply删除掉const commentListV2 = excludeTypeIsEqualToReply({ commentList });// 给这组comment加一个replyconst newCommentList = handleAddReply({commentId,commentList: commentListV2,});setCommentList(newCommentList);}}>Reply)}
);
}// 新增comment
function AddComment({id,user,commentList,setCommentList,setAddItemInfo,setCommentsLoading,...props
}) {const {userInfo: loginUserInfo,projectId,text,getAgendaCommentData,} = props;const date = formatDate(new Date());const [currentEditVal, setCurrentEditVal] = useState('');return (
user} date={date} type="add" />
currentEditVal}onChange={(e) => setCurrentEditVal(e.target.value)}/>
 
() => {const dom = document.getElementsByTagName('iframe')?.[0]?.contentWindow?.document?.getElementById?.(id);if (dom) {dom.removeAttribute('id');dom.removeAttribute('style');dom.removeAttribute('data-mce-style');setAddItemInfo({});} else {// catch errorconsole.log('系统出现了未知错误');}}}>Cancelasync () => {// TODO：调后端接口，然后从新刷 comment 区域，或者根据后端的返回的值去做setsetCommentsLoading(true);const res = await API.createAgendaComment({});setCurrentEditVal('');setAddItemInfo({});// 重新获取数据await getAgendaCommentData();setCommentsLoading(false);}}>Comment
);
}
// 查看comment
function ViewComment({ content, ...props }) {const { replyList } = props;const publicParams = {type: 'view',loginUserInfo: props.userInfo,};return (
...props} {...publicParams} />
{content}
{renderReplyList({...props,...publicParams,})}...props}showReply={replyList?.[replyList.length - 1]?.type !== 'reply'}/>
);
}
// 编辑comment
function EditComment(props) {const {noPedding,needFoother = true,replyList,content,user,commentList,commentId,userInfo,setCommentList,projectId,identifier,channel,setCommentsLoading,getAgendaCommentData,} = props;const publicParams = {type: 'view',loginUserInfo: userInfo,};const date = formatDate(new Date());const [currentEditVal, setCurrentEditVal] = useState(content);return (
noPedding ? { padding: 0 } : {}}>user} date={date} {...props} />
currentEditVal}onChange={(e) => setCurrentEditVal(e.target.value)}/>
 
() => {// 将comment变回查看模式const newCommentList = changeCurrentToNewMode({commentList,commentId,newType: 'view',});setCommentList(newCommentList);}}>Cancelasync () => {console.log('currentEditVal: ',commentId,'--',currentEditVal,props,);try {setCommentsLoading(true);// 调用edit接口，然后成功之后reloadconst res = await API.editAgendaComment({});getAgendaCommentData();setCommentsLoading(false);} catch (err) {console.log('!!!!', err);}}}>Comment
{renderReplyList({...props,...publicParams,})}{needFoother && (...props}showReply={replyList?.[replyList.length - 1]?.type !== 'reply'}/>)}
);
}function Comment(props) {const { type, id } = props;const returnDomByMode = {add: id} {...props} user={props?.userInfo?.name || ''} />,edit: ...props} />,view: ...props} />,};return (`comment_item_${id}`}style={{ marginBottom: 12 }}onClick={() => {const Ele = document.getElementsByClassName('current_selected_comment',)[0];if (Ele) {Ele.classList.remove('current_selected_comment');}}}>{returnDomByMode[type]}