共同编辑文档功能实现(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 --saveyarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

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

<style src="@wangeditor/editor/dist/css/style.css"></style>

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

共同编辑文档代码实现

HTML样式部分

<template><div class="all"><el-table :data="tableData" :border="true" style="padding-left: 1px"><el-table-column prop="name" width="80"><template #="scoped"><div style="padding-left: 10px">{{ scoped.row.name }}</div></template></el-table-column><el-table-columnv-for="(item, index) in loading":key="index"width="300"><template #="scoped"><div v-if="scoped.row.Record[index]"><Editorv-model="scoped.row.Record[index].content"mode="default"@onBlur="handleBlur(scoped.row.Record[index])"/></div></template></el-table-column></el-table></div>
</template>

JS部分

<script setup>import {InterviewRecord,
} from "@/apis/home.js";import {sendWebsocket,closeWebsocket,websocketSend,
} from "@/utils/websocket.js";import { ref, onMounted, onBeforeUnmount } from "vue";
import { Editor } from "@wangeditor/editor-for-vue";// 展示数据
const tableData = ref([]);// 评论人的数量(渲染几个富文本框)
const loading = ref(0);//场id
const arrangeId = ref(0);// 请求数据接口方法
const showData = (id) => {InterviewRecord(id).then((res) => {localStorage.setItem("arrangeId", res.data.id);arrangeId.value = res.data.id;tableData.value = res.data.Students;loading.value = res.data.Students[0].Record.length;});
};onMounted(() => {
//获取初始数据,进入行页面渲染showData(arrangeId);
//链接websocket后面的所有通信全部依靠他来实现sendWebsocket(wsMessage, wsError);
});//富文本框失去焦点
const handleBlur = (e) => {// 发起ws数据websocketSend(e);
};// 监听服务器传来的变化
const wsMessage = (data) => {const dataJson = data;// 这里写拿到数据后的业务代码if (tableData.value.length !== 0) {console.log(tableData.value);tableData.value.flatMap((innerArray) => innerArray).forEach((element) => {element.Record.forEach((a) => {console.log(dataJson.arrange_id, a.arrange_id);if (dataJson.arrange_id == a.arrange_id &&dataJson.content_id == a.content_id &&dataJson.student_id == a.student_id) {//将后台返回的数据进行,更改a.content = dataJson.content;}});});}
};const wsError = () => {// 比如取消页面的loadingconsole.log("ws连接错误的回调函数");
};// 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成,用户就跳转了页面
// 在需要主动关闭ws的地方都可以调用该方法
onBeforeUnmount(() => {closeWebsocket();
});
</script>

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

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

arrange_id: 207,         场id

student_id: 1,              学生id(行id)

content_id: 0,              列id

content: '<p>看看看看米尔</p>     内容

css部分

//最后别忘了因为富文本框的css<style src="@wangeditor/editor/dist/css/style.css"></style>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/227538.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当 Sealos 遇上区块链

当 Sealos 遇上区块链 拿着区块链技术不一定是去发币&#xff0c;很多业务系统也适合用这些技术&#xff0c;比如做个统一支付系统&#xff0c;积分系统等&#xff0c;可以做为一家公司的金融基础设施&#xff0c;或支付中台。拿链的技术去做有很多好处&#xff1a; 高可用&a…

【图的应用一:最小生成树】- 用 C 语言实现普里姆算法

目录 一、最小生成树 二、普里姆算法的构造过程 三、普里姆算法的实现 一、最小生成树 假设要在 n 个城市之间建立通信联络网&#xff0c;则连通 n 个城市只需要 n - 1 条线路。这时&#xff0c;自然会考虑这样一个问题&#xff0c;如何在最节省经费的前提下建立这个通信…

AUTOSAR汽车电子嵌入式编程精讲300篇-车载CAN总线网关的网络安全协议设计(续)

目录 3.2 网关过滤功能模块设计 3.3 车载网关ID安全等级分类 3.3.1 ID安全等级划分标准

Ansible运行临时命令

Ansible服务的强大之处在于只需要一条命令&#xff0c;便可以操控成千上万台的主机节点&#xff0c;而ansible命令便是最得力的工具之一。前文提到&#xff0c;Ansible服务实际上只是一个框架&#xff0c;能够完成工作的是模块化功能代码。Ansible的常用模块大致有20多个&#…

机器学习之无监督学习

聚类&#xff1a;发掘纵向结构的某种模式信息&#xff0c;某些x属于相同的分布或者类别 特征学习&#xff1a;发掘横向结构的某种模式信息&#xff0c;每一行都可以看成是一种属性或特征 密度估计&#xff1a;发掘底层数据分布&#xff0c;x都是从某个未知分布p(x)采出来的&a…

代码随想录 474. 一和零

题目 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。 示例 1&#xff1a; 输入&#xff1a;strs [“10…

vue实现悬浮窗拖动的自定义指令

首先在自己的项目根目录下建一个 src --> config --> drag.js 然后在main.js中全局引入 //鼠标拖动 import drag from /config/drag; Vue.use(drag); drag.js文件相关代码 import Vue from vue; //使用Vue.directive()定义一个全局指令 //1.参数一&#xff1a;指令的…

(四)STM32 操作 GPIO 点亮 LED灯 / GPIO工作模式

目录 1. STM32 工程模板中的工程目录介绍 2. GPIO 简介 3. GPIO 框图剖析 1&#xff09;保护二极管及上、下拉电阻 2&#xff09; P-MOS 管和 N-MOS 管 3&#xff09;输出数据寄存器 3.1&#xff09;ODR 端口输出数据寄存器 3.2&#xff09;BSRR 端口位设置/清除寄存器 4&a…

实验六 排序相关典型算法实现

一 实验目的 1&#xff0e;熟悉并掌握各种排序方法的设计思路。 2&#xff0e;掌握各种具体排序算法在计算机上的实现。 3&#xff0e;掌握各种排序方法的性能比较。 二 实验内容及要求 实验内容&#xff1a; 1. 编程实现如下功能&#xff1a; &#xff08;1&#xff09…

CGAL的手柄和循环器

1、手柄 CGAL中的大多数数据结构在其用户界面中使用Handles 的概念来引用它们存储的元素。这个概念描述了有时被称为琐碎迭代器的东西。Handle类似于指向对象的指针&#xff0c;提供解引用运算符*&#xff08;&#xff09;和成员访问运算符->&#xff08;&#xff09;&#…

【Java代码审计】目录穿越篇

【Java代码审计】目录穿越篇 1.Java中的目录穿越2.目录穿越漏洞审计3.Java中目录穿越漏洞修复 1.Java中的目录穿越 目录穿越漏洞产生的本质是路径可控&#xff0c;一旦涉及文件的读取问题便会涉及java.io.File类&#xff0c;因此在审计这类漏洞时可以优先查找java.io.File引用…

最强Pose模型RTMO开源 | 基于YOLO架构再设计,9MB+9ms性能完爆YOLO-Pose

实时多人在图像中的姿态估计面临着在速度和精度之间实现平衡的重大挑战。尽管两阶段的上下文方法在图像中人数增加时会减慢速度&#xff0c;但现有的单阶段方法往往无法同时实现高精度和实时性能。 本文介绍了RTMO&#xff0c;这是一个单阶段姿态估计框架&#xff0c;通过在YOL…

超文本传送协议HTTP

目录 HTTP简介&#xff1a; URL的格式&#xff1a; HTTP协议的特点&#xff1a; HTTP/1.0协议&#xff1a; HTTP/1.1协议&#xff1a; HTTP/2: HTTP代理服务器&#xff1a; HTTP的报文结构&#xff1a; 请求报文的特点&#xff1a; 响应报文的特点&#xff1a; Cook…

小 cookie,大作用:探索网站中的隐私追踪器(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

大华 DSS 数字监控系统 itcBulletin SQL 注入漏洞复现

0x01 产品简介 大华 DSS 数字监控系统是大华开发的一款安防视频监控系统,拥有实时监视、云台操作、录像回放、报警处理、设备管理等功能。 0x02 漏洞概述 大华 DSS存在SQL注入漏洞,攻击者 /portal/services/itcBulletin 路由发送特殊构造的数据包,利用报错注入获取数据库…

springboot——定时任务、异步任务

springboot——定时任务、异步任务 一、定时任务1、创建一个定时任务、时间配置文件2、springboot主程序开启定时任务 EnableScheduling3、使用 Scheduled 注解 二、定时任务、异步执行。1、springboot主程序开启异步任务 EnableAsync2、方法上增加 Async 注解&#xff0c;标识…

【JAVA日志框架】JUL,JDK原生日志框架详解。

前言 Java日志体系混乱&#xff1f;Java日志框架系列&#xff0c;清晰简洁整理好整个Java的日志框架体系。第一篇&#xff0c;JDK原生日志框架——JUL。 目录 1.概述 2.日志级别 3.配置 4.继承关系 1.概述 日志框架的核心问题&#xff1a; 日志是用来记录应用的一些运行…

.NET基础面试题一

1.C#中堆和栈的区别? 堆(Heap)和栈(Stack)是C#中两种分配内存的不同方式 栈(Stack)&#xff1a;是一种先进后出的内存分配方式。它用于存储基本数据类型和对象引用&#xff0c;它是一种连续的内存空间&#xff0c;存储在cpu的寄存器上&#xff0c;它的大小在编译的时就是已知的…

nodejs+vue+微信小程序+python+PHP校园二手交易系统的设计与实现-计算机毕业设计推荐

(2)管理员 进行维护&#xff0c;以及平台的后台管理工作都依靠管理员&#xff0c;其可以对信息进行管理。需具备功能有&#xff1b;首页、个人中心、学生管理、物品分类管理、物品信息管理、心愿贴、系统管理、订单管理等功能。系统分成管理员控制模块和学生模块。 本系统有良好…

pyansys环境配置(安装所需的库)

目录 1. 环境配置&#xff1a; 2. pyansys库配合Ansys软件启动代码 1. 环境配置&#xff1a; 试了好多种版本&#xff0c;最终以下版本可以跑通&#xff1a; 注意&#xff1a;Python和ANSYS的版本也会影响到安装包的版本&#xff0c;我使用的配置如下&#xff1a; Python3.9…