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各章节终篇索引(更新中) ############
其他 父子关系(ctx、协程)#### golang存在的父子关系 ####_子goroutine panic会导致父goroutine挂掉吗-CSDN博客 参数传递(slice、map)#### go中参数传递(涉及:切片slice、map、channel等) ###…...
一个基于MySQL的数据库课程设计的基本框架
数据库课程设计(MySQL)通常涉及多个步骤,以确保数据库的有效设计、实现和维护。以下是一个基于MySQL的数据库课程设计的基本框架,结合参考文章中的相关信息进行整理: ### 一、引言 * **背景**:简要介绍为…...
架构设计基本原则
开闭原则 开闭原则(Open Closed Principle,OCP)是面向对象编程(OOP)中的一个核心原则,主要强调的是软件实体(类、模块、函数等)应该对扩展开放,对修改封闭。 解释&…...

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

【数据库设计】宠物商店管理系统
目录 🌊1 问题的提出 🌊2 需求分析 🌍2.1 系统目的 🌍2.2 用户需求 🌻2.2.1 我国宠物行业作为新兴市场,潜力巨大 🌻2.2.2 我国宠物产品消费规模逐年增大 🌻2.2.3 我国宠物主选…...
前端 JS 经典:node 的模块查找策略
前言:我们引入模块后,node 大概的查找步骤分为 文件查找、文件夹查找、内置模块查找、第三方模块查找,在 node 中使用 ESM 模块语法,需要创建 package.json 文件,并将 type 设置为 module。简单起见,我们用…...
C++中的23种设计模式
目录 摘要 创建型模式 1. 工厂方法模式(Factory Method Pattern) 2. 抽象工厂模式(Abstract Factory Pattern) 3. 单例模式(Singleton Pattern) 4. 生成器模式(Builder Pattern࿰…...

vue.js+node.js+mysql在线聊天室源码
vue.jsnode.jsmysql在线聊天室源码 技术栈:vue.jsElement UInode.jssocket.iomysql vue.jsnode.jsmysql在线聊天室源码...
浏览器无痕模式和非无痕模式的区别
无痕模式 1. 历史记录:在无痕模式下,浏览器不会保存浏览记录、下载记录、表单数据和Cookies。当你关闭无痕窗口后,这些信息都会被删除。 2. Cookies:无痕模式会在会话期间临时存储Cookies,但在关闭无痕窗口…...
WPF框架,修改ComboBox控件背景色 ,为何如此困难?
直接修改Background属性不可行 修改控件背景颜色,很多人第一反应便是修改Background属性,但是修改过后便会发现,控件的颜色没有发生任何变化。 于是在网上搜索答案,便会发现一个异常尴尬的情况,要么就行代码简单但是并…...

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

网络的下一次迭代:AVS 将为 Web2 带去 Web3 的信任机制
撰文:Sumanth Neppalli,Polygon Ventures 编译:Yangz,Techub News 本文来源香港Web3媒体:Techub News AVS (主动验证服务)将 Web2 的规模与 Web3 的信任机制相融合,开启了网络的下…...

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

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

IO流打印流
打印流 IO流打印流是Java中用来将数据打印到输出流的工具。打印流提供了方便的方法来格式化和输出数据,可以用于将数据输出到控制台、文件或网络连接。 分类:打印流一般是指:PrintStream,PrintWriter两个类 特点1:打印流只操作文件目的地,…...
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主键 “主键(PRIMARY KEY)”的完整称呼是“主键约束”。 MySQL 主键约束是一个列或者列的组合,其值能唯一地标识表中的每一行。这样的一列或多列称为表的主键,通过它可以强制表的实体完整性。 …...
【STM32】步进电机及其驱动
设计和实现基于STM32微控制器的步进电机驱动系统是一个涉及硬件设计、固件编程和电机控制算法的复杂任务。以下是一个概要设计,包括一些基本的代码示例。 1. 硬件设计 1.1 微控制器选择 选择STM32系列微控制器,因为它提供了丰富的GPIO端口和足够的处理…...

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

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...

.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...

让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...

LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
数据库——redis
一、Redis 介绍 1. 概述 Redis(Remote Dictionary Server)是一个开源的、高性能的内存键值数据库系统,具有以下核心特点: 内存存储架构:数据主要存储在内存中,提供微秒级的读写响应 多数据结构支持&…...