共同编辑文档功能实现（websocket）

目录

前言

websocket封装

wangeditor下载

共同编辑文档代码实现

HTML样式部分

JS部分

css部分

---

前言

功能：实现文档共同编辑功能，可以实时接收到其他人的信息 

思路：先调用接口获取相应的数据进行渲染，然后通过webSocket建立链接，实时进行数据的接收和修改。

技术栈：pinia,vue3,websocket,wangeditor

websocket封装

        参考文章：在vue项目中webSocket封装（传token）-CSDN博客

这里就不在做赘述了。

wangeditor下载

        wangeditor是一个富文本容器，在本次共享文档中，我们通过它当输入框（原因：它能够保存输入的格式）

        官网：安装 | wangEditor

本项目中我们只需要进行简单的安装就行

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

在安装完成后，一定要在相应的vue文件中引入css样式

 选中文字后会出现样式的更改的功能，如果不喜欢可以直接去上面css源码里把其中的样式更改掉

共同编辑文档代码实现

HTML样式部分

JS部分

在 // 监听服务器传来的变化时

因为第一次请求所有数据时，后台返回的数据嵌套的比较深，所有我进行了三层循环，进行定位，用来查找相匹配的数据，进行文本的更改

arrange_id: 207,         场id

student_id: 1,              学生id(行id)

content_id: 0,              列id

content: '

看看看看米尔

     内容

css部分

//最后别忘了因为富文本框的css

至此所有的功能就都实现了，如果大家有什么不懂的可以在评论区里留言。