当前位置: 首页 > news >正文

vue富文本wangeditor加@人功能(vue2 vue3都可以)

在这里插入图片描述

依赖

"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"@wangeditor/plugin-mention": "^1.0.0",

RichEditor.vue

<template><div style="border: 1px solid #ccc; position: relative"><Editorstyle="height: 100px":defaultConfig="editorConfig"v-model="valueHtml"@onCreated="handleCreated"@onChange="onChange"/><mention-modalv-if="isShowModal"@hideMentionModal="hideMentionModal"@insertMention="insertMention":position="position":list="list"></mention-modal></div>
</template><script setup lang="ts">
import { ref, shallowRef, onBeforeUnmount, nextTick, watch } from 'vue';
import { Boot } from '@wangeditor/editor';
import { Editor } from '@wangeditor/editor-for-vue';import mentionModule from '@wangeditor/plugin-mention';
import MentionModal from './MentionModal.vue';
// 注册插件
Boot.registerModule(mentionModule);const props = withDefaults(defineProps<{content?: string;list: any[];}>(),{content: '',},
);
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();// const valueHtml = ref('<p>你好<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="A张三" data-info="%7B%22id%22%3A%22a%22%7D">@A张三</span></p>')
const valueHtml = ref('');
const isShowModal = ref(false);watch(() => props.content,(val: string) => {nextTick(() => {valueHtml.value = val;});},
);// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.value;if (editor == null) return;editor.destroy();
});
const position = ref({left: '15px',top: '0px',bottom: '0px',
});
const handleCreated = (editor: any) => {editorRef.value = editor; // 记录 editor 实例,重要!position.value = editor.getSelectionPosition();
};const showMentionModal = () => {// 对话框的定位是根据富文本框的光标位置来确定的nextTick(() => {const editor = editorRef.value;console.log(editor.getSelectionPosition());position.value = editor.getSelectionPosition();});isShowModal.value = true;
};
const hideMentionModal = () => {isShowModal.value = false;
};
const editorConfig = {placeholder: '@通知他人,添加评论',EXTEND_CONF: {mentionConfig: {showModal: showMentionModal,hideModal: hideMentionModal,},},
};const onChange = (editor: any) => {console.log('changed html', editor.getHtml());console.log('changed content', editor.children);
};const insertMention = (id: any, username: any) => {const mentionNode = {type: 'mention', // 必须是 'mention'value: username,info: { id, x: 1, y: 2 },job: '123',children: [{ text: '' }], // 必须有一个空 text 作为 children};const editor = editorRef.value;if (editor) {editor.restoreSelection(); // 恢复选区editor.deleteBackward('character'); // 删除 '@'console.log('node-', mentionNode);editor.insertNode(mentionNode, { abc: 'def' }); // 插入 mentioneditor.move(1); // 移动光标}
};function getAtJobs() {return editorRef.value.children[0].children.filter((item: any) => item.type === 'mention').map((item: any) => item.info.id);
}
defineExpose({valueHtml,getAtJobs,
});
</script><style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.w-e-scroll {max-height: 100px;
}
</style>

MentionModal.vue

<template><div id="mention-modal" :style="{ left, right, bottom }"><el-inputid="mention-input"v-model="searchVal"ref="input"@keyup="inputKeyupHandler"onkeypress="if(event.keyCode === 13) return false"placeholder="请输入用户名搜索"/><el-scrollbar height="180px"><ul id="mention-list"><li v-for="item in searchedList" :key="item.id" @click="insertMentionHandler(item.id, item.username)">{{ item.username }}</li></ul></el-scrollbar></div>
</template><script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';const props = defineProps<{position: any;list: any[];
}>();
const emit = defineEmits(['hideMentionModal', 'insertMention']);
// 定位信息
const top = computed(() => {return props.position.top;
});
const bottom = computed(() => {return props.position.bottom;
});
const left = computed(() => {return props.position.left;
});
const right = computed(() => {if (props.position.right) {const right = +props.position.right.split('px')[0] - 180;return right < 0 ? 0 : right + 'px';}return '';
});
// list 信息
const searchVal = ref('');
// const tempList = Array.from({ length: 20 }).map((_, index) => {
//   return {
//     id: index,
//     username: '张三' + index,
//     account: 'wp',
//   };
// });const list: any = ref(props.list);
// 根据 <input> value 筛选 list
const searchedList = computed(() => {const searchValue = searchVal.value.trim().toLowerCase();return list.value.filter((item: any) => {const username = item.username.toLowerCase();if (username.indexOf(searchValue) >= 0) {return true;}return false;});
});
const inputKeyupHandler = (event: any) => {// esc - 隐藏 modalif (event.key === 'Escape') {emit('hideMentionModal');}// enter - 插入 mention nodeif (event.key === 'Enter') {// 插入第一个const firstOne = searchedList.value[0];if (firstOne) {const { id, username } = firstOne;insertMentionHandler(id, username);}}
};
const insertMentionHandler = (id: any, username: any) => {emit('insertMention', id, username);emit('hideMentionModal'); // 隐藏 modal
};
const input = ref();
onMounted(() => {// 获取光标位置// const domSelection = document.getSelection()// const domRange = domSelection?.getRangeAt(0)// if (domRange == null) return// const rect = domRange.getBoundingClientRect()// 定位 modal// top.value = props.position.top// left.value = props.position.left// focus inputnextTick(() => {input.value?.focus();});
});
</script><style>
#mention-modal {position: absolute;bottom: -10px;border: 1px solid #ccc;background-color: #fff;padding: 5px;transition: all 0.3s;
}#mention-modal input {width: 150px;outline: none;
}#mention-modal ul {padding: 0;margin: 5px 0 0;
}#mention-modal ul li {list-style: none;cursor: pointer;padding: 5px 2px 5px 10px;text-align: left;
}#mention-modal ul li:hover {background-color: #f1f1f1;
}
</style>

相关文章:

vue富文本wangeditor加@人功能(vue2 vue3都可以)

依赖 "wangeditor/editor": "^5.1.23", "wangeditor/editor-for-vue": "^5.1.12", "wangeditor/plugin-mention": "^1.0.0",RichEditor.vue <template><div style"border: 1px solid #ccc; posit…...

######## redis各章节终篇索引(更新中) ############

其他 父子关系&#xff08;ctx、协程&#xff09;#### golang存在的父子关系 ####_子goroutine panic会导致父goroutine挂掉吗-CSDN博客 参数传递&#xff08;slice、map&#xff09;#### go中参数传递&#xff08;涉及&#xff1a;切片slice、map、channel等&#xff09; ###…...

一个基于MySQL的数据库课程设计的基本框架

数据库课程设计&#xff08;MySQL&#xff09;通常涉及多个步骤&#xff0c;以确保数据库的有效设计、实现和维护。以下是一个基于MySQL的数据库课程设计的基本框架&#xff0c;结合参考文章中的相关信息进行整理&#xff1a; ### 一、引言 * **背景**&#xff1a;简要介绍为…...

架构设计基本原则

开闭原则 开闭原则&#xff08;Open Closed Principle&#xff0c;OCP&#xff09;是面向对象编程&#xff08;OOP&#xff09;中的一个核心原则&#xff0c;主要强调的是软件实体&#xff08;类、模块、函数等&#xff09;应该对扩展开放&#xff0c;对修改封闭。 解释&…...

云原生应用开发培训,开启云计算时代的新征程

在云计算时代&#xff0c;云原生应用开发技术已经成为IT领域的热门话题。如果您想要转型至云原生领域&#xff0c;我们的云原生应用开发培训将帮助您开启新征程。 我们的课程内容涵盖了云原生技术的基础概念、容器技术、微服务架构、持续集成与持续发布&#xff08;CI/CD&#…...

【数据库设计】宠物商店管理系统

目录 &#x1f30a;1 问题的提出 &#x1f30a;2 需求分析 &#x1f30d;2.1 系统目的 &#x1f30d;2.2 用户需求 &#x1f33b;2.2.1 我国宠物行业作为新兴市场&#xff0c;潜力巨大 &#x1f33b;2.2.2 我国宠物产品消费规模逐年增大 &#x1f33b;2.2.3 我国宠物主选…...

前端 JS 经典:node 的模块查找策略

前言&#xff1a;我们引入模块后&#xff0c;node 大概的查找步骤分为 文件查找、文件夹查找、内置模块查找、第三方模块查找&#xff0c;在 node 中使用 ESM 模块语法&#xff0c;需要创建 package.json 文件&#xff0c;并将 type 设置为 module。简单起见&#xff0c;我们用…...

C++中的23种设计模式

目录 摘要 创建型模式 1. 工厂方法模式&#xff08;Factory Method Pattern&#xff09; 2. 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09; 3. 单例模式&#xff08;Singleton Pattern&#xff09; 4. 生成器模式&#xff08;Builder Pattern&#xff0…...

vue.js+node.js+mysql在线聊天室源码

vue.jsnode.jsmysql在线聊天室源码 技术栈&#xff1a;vue.jsElement UInode.jssocket.iomysql vue.jsnode.jsmysql在线聊天室源码...

浏览器无痕模式和非无痕模式的区别

无痕模式 1. 历史记录&#xff1a;在无痕模式下&#xff0c;浏览器不会保存浏览记录、下载记录、表单数据和Cookies。当你关闭无痕窗口后&#xff0c;这些信息都会被删除。
 2. Cookies&#xff1a;无痕模式会在会话期间临时存储Cookies&#xff0c;但在关闭无痕窗口…...

WPF框架,修改ComboBox控件背景色 ,为何如此困难?

直接修改Background属性不可行 修改控件背景颜色&#xff0c;很多人第一反应便是修改Background属性&#xff0c;但是修改过后便会发现&#xff0c;控件的颜色没有发生任何变化。 于是在网上搜索答案&#xff0c;便会发现一个异常尴尬的情况&#xff0c;要么就行代码简单但是并…...

Diffusers代码学习: 文本引导深度图像生成

StableDiffusionDepth2ImgPipeline允许传递文本提示和初始图像&#xff0c;以调节新图像的生成。此外&#xff0c;还可以传递depth_map以保留图像结构。如果没有提供depth_map&#xff0c;则管道通过集成的深度估计模型自动预测深度。 # 以下代码为程序运行进行设置 import o…...

网络的下一次迭代:AVS 将为 Web2 带去 Web3 的信任机制

撰文&#xff1a;Sumanth Neppalli&#xff0c;Polygon Ventures 编译&#xff1a;Yangz&#xff0c;Techub News 本文来源香港Web3媒体&#xff1a;Techub News AVS &#xff08;主动验证服务&#xff09;将 Web2 的规模与 Web3 的信任机制相融合&#xff0c;开启了网络的下…...

OpenCV 的模板匹配

OpenCV中的模板匹配 模板匹配&#xff08;Template Matching&#xff09;是计算机视觉中的一种技术&#xff0c;用于在大图像中找到与小图像&#xff08;模板&#xff09;相匹配的部分。OpenCV提供了多种模板匹配的方法&#xff0c;主要包括基于相关性和基于平方差的匹配方法。…...

26.0 Http协议

1. http协议简介 HTTP(Hypertext Transfer Protocol, 超文本传输协议): 是万维网(WWW: World Wide Web)中用于在服务器与客户端(通常是本地浏览器)之间传输超文本的协议.作为一个应用层的协议, HTTP以其简洁, 高效的特点, 在分布式超媒体信息系统中扮演着核心角色. 自1990年提…...

IO流打印流

打印流 IO流打印流是Java中用来将数据打印到输出流的工具。打印流提供了方便的方法来格式化和输出数据&#xff0c;可以用于将数据输出到控制台、文件或网络连接。 分类:打印流一般是指:PrintStream&#xff0c;PrintWriter两个类 特点1:打印流只操作文件目的地&#xff0c;…...

Cohere reranker 一致的排序器

这本notebook展示了如何在检索器中使用 Cohere 的重排端点。这是在 ContextualCompressionRetriever 的想法基础上构建的。 %pip install --upgrade --quiet cohere %pip install --upgrade --quiet faiss# OR (depending on Python version)%pip install --upgrade --quiet…...

MySQL系列-语法说明以及基本操作(二)

1、MySQL数据表的约束 1.1、MySQL主键 “主键&#xff08;PRIMARY KEY&#xff09;”的完整称呼是“主键约束”。 MySQL 主键约束是一个列或者列的组合&#xff0c;其值能唯一地标识表中的每一行。这样的一列或多列称为表的主键&#xff0c;通过它可以强制表的实体完整性。 …...

【STM32】步进电机及其驱动

设计和实现基于STM32微控制器的步进电机驱动系统是一个涉及硬件设计、固件编程和电机控制算法的复杂任务。以下是一个概要设计&#xff0c;包括一些基本的代码示例。 1. 硬件设计 1.1 微控制器选择 选择STM32系列微控制器&#xff0c;因为它提供了丰富的GPIO端口和足够的处理…...

Excel自定义排序和求和

概览 excel作为办公的常备工具&#xff0c;好记性不如烂笔头&#xff0c;在此梳理记录下&#xff0c;此篇文章主要是记录excel的自定义排序和求和 一. 自定义排序 举个例子 1. 填充自定义排序选项 实现步骤&#xff1a; 选定目标排序值&#xff1b;文件->选项->自定…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...