TinyMCE一些问题

news2024/11/16 10:19:22

1.element 在el-dialog中使用tinymce导致富文本弹窗在el-dialog后面的问题
原因是富文本的弹窗层级太低了
在APP.vue中添加样式即可解决

/* 富文本菜单 */
.tox-tinymce-aux {
  z-index: 9999 !important;
}

2.element 在el-dialog中点击富文本的功能栏报错
在这里插入图片描述
由于 aria-hidden 属性在一个获得焦点的元素上被设置,违反了 WAI-ARIA 规范。这种情况通常会在包含 el-dialog 的弹出框或模态对话框中发生,因为这些组件通常会使用 aria-hidden 来隐藏非活动内容。

为了修复这个问题,可以使用 inert 属性替代 aria-hidden。inert 属性不仅会隐藏元素,还会阻止它们获得焦点和用户的交互。这是避免 aria-hidden 引发的无障碍问题的推荐方法。

解决方案
确保对话框关闭时设置 aria-hidden 或 inert:
当对话框关闭时,可以使用 aria-hidden 或 inert 来隐藏不可见的内容。

使用 inert 替代 aria-hidden:
你可以通过 JavaScript 动态地将 inert 属性应用到非活动的内容上。

<template>
  <div>
    <el-button @click="dialogVisible = true">打开富文本</el-button>
    <div ref="chart" style="width: 600px; height: 400px"></div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
      @open="onDialogOpen"
      @close="onDialogClose"
    >
      <new05></new05>
    </el-dialog>
    <div id="mainContent">
      <p>This is the main content.</p>
    </div>
  </div>
</template>
<script>
	methods: {
	    onDialogOpen() {
	      document.getElementById("mainContent").setAttribute("inert", "true");
	    },
	    onDialogClose() {
	      document.getElementById("mainContent").removeAttribute("inert");
	    },
	}
</script>

3.给TinyMCE添加disabled

//TinyMCE inde.vue文件
props: {
    editorDisabled:{
      type:Boolean,
      default:false
    }
  },
tinymce.init({
    selector: '#mytextarea',  // 初始化编辑器的textarea元素的选择器
    readonly: this.editorDisabled,//添加一个控制参数editorDisabled
    // ... 其他配置项
});
//使用TinyMCE的页面
<template>
  <div>
    <tinymce :editorDisabled="formData.editorDisabled" :height="200"></tinymce>
  </div>
</template>

<script>
import tinymce from "./Tinymce/index.vue";
export default {
  components: {
    tinymce,
  },
  data(){
    return{
      formData:{
        editorDisabled:true
      }
    }
  },
};
</script>

<style>
</style>

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

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

相关文章

系统架构设计师 - 知识产权与标准化

知识产权与标准化 知识产权与标准化&#xff08;3分&#xff09;保护范围与对象 ★ ★ ★ ★法律法规 保护期限 ★ ★知识产权人确定 ★ ★ ★ ★侵权判断 ★ ★ ★ ★标准化&#xff08;了解&#xff09;★标准的分类标准的编号 大家好呀&#xff01;我是小笙&#xff0c;本章…

WebSocket程序设计

协议说明 WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。Websocket主要用在B/S架构的应用程序中&#xff0c;在 WebSocket API 中&#xff0c;浏览器和服务器只…

Redis缓存数据库进阶——Redis与分布式锁(6)

分布式锁简介 1. 什么是分布式锁 分布式锁是一种在分布式系统环境下&#xff0c;通过多个节点对共享资源进行访问控制的一种同步机制。它的主要目的是防止多个节点同时操作同一份数据&#xff0c;从而避免数据的不一致性。 线程锁&#xff1a; 也被称为互斥锁&#xff08;Mu…

捷配告诉你半孔是如何做出来的

在PCB设计和制造领域&#xff0c;电镀半孔&#xff08;也称为齿形孔&#xff09;是一种创新技术&#xff0c;它通过焊接为单独的PCB模块提供了一种节省空间的互连方式。捷配在生产过程中经常遇到客户对这种技术的询问&#xff0c;以下是对其工作原理、设计指南和制造工艺的介绍…

Java1.3标准之重要特性及用法实例(十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列…

唯美贺卡制作QQ微信小程序完整源码/无需后台直接运营

这是一款用于发送唯美贺卡的一个小程序&#xff0c;界面唯美简洁&#xff0c;无需后台可直接运营&#xff0c;可以自定义卡片内容图标、邮票等元素&#xff0c;QQ微信小程序都可以直接使用&#xff0c;对接了部分广告&#xff0c;大家可以根据自己的广告id进行替换。 小程序主…

Linux驱动开发——字符设备驱动开发

1 概述 1.1 说明 本文是学习rk3568开发板驱动开发的记录&#xff0c;代码依托于rk3568开发板 1.2 字符设备介绍 字符设备是 Linux 驱动中最基本的一类设备驱动&#xff0c;字符设备就是一个一个字节&#xff0c;按照字节流进行读写操作的设备&#xff0c;读写数据是分先后顺…

第05课 Scratch入门篇:海底世界-多彩的鱼

海底世界-多彩的鱼 入门篇适合新手&#xff0c;如您已经学过&#xff0c;可以忽略本节课&#xff01; 故事背景&#xff1a; 蔚蓝的海洋底部有一群凶猛的鲨鱼和一群色彩斑斓的小鱼&#xff0c;还有变色的水母&#xff0c;敲打乐器的章鱼&#xff0c;还有一些能够变色的小鱼畅…

在Ollama运行HuggingFace下载的模型

本地运行模型我之前都直接使用LM-studio&#xff0c;好用、无脑。本地用足够了。但是放在服务器上才是正道&#xff0c;本地运行无法长时间开启保持运行&#xff0c;而且Ollama推出了并行GPU计算之后可用性大幅提升&#xff0c;可用性很高。 今天研究下如何用Ollama如何在本地来…

Python 教程(六):函数式编程

目录 专栏列表前言函数定义参数返回值 示例函数类型普通函数空函数匿名函数&#xff08;Lambda 函数&#xff09;嵌套函数函数装饰器高阶函数 函数参数位置参数默认参数可变位置参数可变关键字参数 函数属性和方法__name____doc__func.__dict__func.__defaults__func.__annotat…

如何为 5G 小型基站部署选择振荡器

5G 网络频谱频率更高、覆盖范围更短&#xff0c;因此比前几代网络密度更高。超高速 5G 回程 (mmWave) 在很大程度上依赖于小型基站&#xff0c;不仅是为了覆盖范围&#xff0c;也是为了速度。除此之外&#xff0c;O-RAN 联盟等举措为 RAN 生态系统提供了更多选择&#xff0c;但…

html+css 实现多选按钮动画(input checkbox按钮)

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 文…

Vue3(二):computed、watch、生命周期、hooks

一、computed计算属性 <template><div class"person"> <!-- <input type"text" v-model"{{ firstName }}"> <input type"text" v-model"{{ lastName }}"> --><h1>一个人的信息</h1…

爬虫-通过几个例子来说明并发以及多线程

并发 什么是并发&#xff1f;并发&#xff0c;在操作系统中&#xff0c;是指一个时间段中有几个程序都处于已启动运行到运行完毕之间&#xff0c;且这几个程序都是在同一个处理机上运行&#xff0c;但任一个时刻点上只有一个程序在处理机上运行。 嗯&#xff0c;字认识&#…

vulntarget-b

实际部署之后centos7 的ip有所变动分别是 :192.168.127.130以及10.0.20.30 Centos7 老规矩还是先用fscan扫一下服务和端口&#xff0c;找漏洞打 直接爆出来一个SSH弱口令…&#xff0c;上来就不用打了&#xff0c;什么意思&#xff1f;&#xff1f;&#xff1f; 直接xshell…

快递员送包裹与一致性哈希的关系

一致性哈希&#xff08;Consistent Hashing&#xff09;是一种用于分布式系统中数据分布和负载均衡的哈希技术。它通过减少数据迁移、支持动态扩展和高容错等特点&#xff0c;在分布式缓存、存储、负载均衡等系统中有广泛应用。以下是对一致性哈希的详细介绍&#xff1a; 一致…

跨境电商平台评论管理:如何避免评论被删及提高留评率

在跨境电商领域&#xff0c;评论对于产品的销售和品牌形象至关重要。然而&#xff0c;卖家常常面临评论被删除的问题&#xff0c;这不仅影响了产品的曝光和销售&#xff0c;还可能对店铺声誉造成损害。本文将探讨亚马逊、Ozon、速卖通、Lazada等跨境电商平台评论被删除的原因&a…

财务分析,奥威BI行计算助力财务解放报表工作

【财务分析&#xff0c;奥威BI行计算助力财务解放报表工作】 在企业的财务管理体系中&#xff0c;财务报表的编制与分析是至关重要的一环。然而&#xff0c;传统的手工编制报表方式不仅耗时耗力&#xff0c;还难以应对日益复杂多变的财务数据需求。奥威BI&#xff08;Business…

2024最火的知识付费系统小程序+PC+H5三端数据互通支持采集资源开源版

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 系统含带 裂变模式 可以助力好友来获取资源共享 分站功能 独立后台 会员功能 卡密功能 二级分销功能等 自行研究看 后期有更新新版会在持续发布 目前版本是3.5 是我花三天时间修复的 …

数据开发/数仓工程师上手指南(三)数仓构建流程

前言 此系列的上篇文章通过拆解电商业务数仓系统&#xff0c;通过数仓分层概念对整个业务进行拆解分层&#xff0c;那么本章节将沿着上一篇的数仓概念分层切割电商业务&#xff0c;去具体构建电商业务的数据仓库&#xff0c;我们将按照行业认可标准的流程去构建较为完整的数据…