wangEditor 移除表情包菜单项的配置步骤‌

wangEditor 移除表情包菜单项的配置步骤‌

  • 1. 确认表情包菜单项的 Key‌
  • ‌2. 配置 excludeKeys 排除表情包‌
  • ‌3. 验证配置生效‌
  • 注意事项‌

1. 确认表情包菜单项的 Key‌

‌默认 Key 为 emotion‌:根据工具栏默认配置,表情包菜单项的 Key 为 emotion。

typescript// 通过代码动态获取所有菜单项 Key(可选)
const editorRef = shallowRef()
const handleCreated = (editor) => {const allMenuKeys = editor.getAllMenuKeys() // 包含 'emotion'console.log('所有菜单项 Key:', allMenuKeys)
}

‌2. 配置 excludeKeys 排除表情包‌

‌在 Toolbar 组件中传递配置‌:确保 excludeKeys 绑定到 Toolbar 组件的 defaultConfig 属性。

vue<template><Toolbar :defaultConfig="toolbarConfig" /><Editor v-model="valueHtml" :defaultConfig="editorConfig" />
</template><script setup>
import { IToolbarConfig } from '@wangeditor/editor'// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {excludeKeys: ['emotion'] // 移除表情包
}
</script>

‌3. 验证配置生效‌

‌检查 DOM 结构‌:使用浏览器开发者工具查看工具栏 DOM,确认 emotion 相关元素已移除。
‌打印当前工具栏配置‌:

const handleCreated = (editor) => {const toolbar = editor.getToolbar()console.log('当前生效的工具栏配置:', toolbar.getConfig().toolbarKeys)
}

注意事项‌

‌版本一致性‌:确保 @wangeditor/editor-for-vue 和 @wangeditor/editor 主版本均为 v5.x。
‌动态修改需重建实例‌:若运行时需更新配置,需先销毁旧实例再创建新实例。
‌服务端渲染兼容‌:在 Nuxt3 等 SSR 框架中,需使用 包裹编辑器组件。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

正则表达式详解

文章目录 1. 正则表达式基础1.1 什么是正则表达式1.2 为什么需要学习正则表达式1.3 Java中的正则表达式支持2. 正则表达式语法2.1 基本匹配2.2 元字符2.2.1 常用元字符2.2.2 转义字符2.2.3 字符类2.2.4 预定义字符类2.2.5 量词2.3 贪婪与非贪婪匹配2.4 分组与捕获2.4.1 命名分组…

MLLM之Bench:LEGO-Puzzles的简介、安装和使用方法、案例应用之详细攻略

MLLM之Bench&#xff1a;LEGO-Puzzles的简介、安装和使用方法、案例应用之详细攻略 目录 LEGO-Puzzles的简介 1、LEGO-Puzzles的特点 LEGO-Puzzles的安装和使用方法 1、安装 步骤 0&#xff1a;安装 VLMEvalKit 步骤 1&#xff1a;设置 API 密钥&#xff08;可选&#xf…

Java大厂面试突击:从Spring Boot自动配置到Kafka分区策略实战解析

第一轮核心知识 面试官&#xff1a;请解释Spring Boot中自动配置的工作原理并演示如何自定义一个ConfigurationProperties组件&#xff1f; xbhog&#xff1a;自动配置通过EnableAutoConfiguration注解触发&#xff0c;结合当前环境判断&#xff08;如是否检测到MyBatis依赖&…

STM32 定时器TIM

定时器基础知识 定时器就是用来定时的机器&#xff0c;是存在于STM32单片机中的一个外设。STM32总共有8个定时器&#xff0c;分别是2个高级定时器(TIM1、TIM8)&#xff0c;4个通用定时器(TIM2、TIM3、TIM4、TIM5)和2个基本定时器(TIM6、TIM7)&#xff0c;如下图所示: STM32F1…

NEPCON China 2025 | 具身智能时代来临,灵途科技助力人形机器人“感知升级”

4月22日至24日&#xff0c;生产设备暨微电子工业展&#xff08;NEPCON China 2025&#xff09;在上海如期开展。本届展会重磅推出“人形机器人拆解展区”&#xff0c;汇聚35家具身智能产业链领军企业&#xff0c;围绕机械结构、传感器布局、驱动系统与AI算法的落地应用&#xf…

操作系统:计算机世界的基石与演进

一、操作系统的本质与核心功能 操作系统如同计算机系统的"总管家"&#xff0c;在硬件与应用之间架起关键桥梁。从不同视角观察&#xff0c;其核心功能呈现多维价值&#xff1a; 硬件视角的双重使命&#xff1a; 硬件管理者&#xff1a;通过内存管理、进程调度和设…

C++动态分配内存知识点!

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家好呀&#xff0c;又是分享干货的时间&#xff0c;今天我们来学习一下动态分配内存。 文章目录 1.动态分配内存的思想 2.动态分配内存的概念 2.1内存分配函数 2.2动态内存的申请和释放 2.3内存碎片问…

2025.4.26总结

今天把马良老师的《职场十二法则》看完后&#xff0c;感触极大&#xff0c;这们课程就是一场职场启蒙课。 虽然看过不少关于职场的书籍&#xff0c;但大多数是关于职场进阶&#xff0c;方法方面的。并没有解答“面对未来二三十年的职场生涯&#xff0c;我该怎么去看待自己的工…

在Spring Boot项目中实现Word转PDF并预览

在Spring Boot项目中实现Word转PDF并进行前端网页预览&#xff0c;你可以使用Apache POI来读取Word文件&#xff0c;iText或Apache PDFBox来生成PDF文件&#xff0c;然后通过Spring Boot控制器提供文件下载或预览链接。以下是一个示例实现步骤和代码&#xff1a; 1. 添加依赖 …

计算机视觉——对比YOLOv12、YOLOv11、和基于Darknet的YOLOv7的微调对比

概述 目标检测领域取得了巨大进步&#xff0c;其中 YOLOv12、YOLOv11 和基于 Darknet 的 YOLOv7 在实时检测方面表现出色。尽管这些模型在通用目标检测数据集上表现卓越&#xff0c;但在 HRSC2016-MS&#xff08;高分辨率舰船数据集&#xff09; 上对 YOLOv12 进行微调时&…

Linux系统编程之内存映射

概述 内存映射是操作系统提供的一种机制&#xff0c;使得文件或设备的内容可以直接映射到进程的虚拟地址空间中。这意味着&#xff0c;我们可以像访问数组一样读写文件内容&#xff0c;而不需要显式地调用I/O函数进行数据传输。内存映射适用于多种应用场景&#xff0c;包括但不…

MyBatis XML 配置完整示例(含所有核心配置项)

MyBatis XML 配置完整示例&#xff08;含所有核心配置项&#xff09; 1. 完整 mybatis-config.xml 配置文件 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC "-//mybatis.org//DTD Config 3.0//EN""htt…