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

C#结合JS 修改解决 KindEditor 弹出层问题

目录

问题现象

原因分析

范例运行环境

解决问题

修改 kindeditor.js

C# 服务端更新

小结


问题现象

KindEditor 是一款出色的富文本HTML在线编辑器,关于编辑器的详细介绍可参考我的文章《C# 将 TextBox 绑定为 KindEditor 富文本》,这里我们讲述在使用中遇到的一个问题,在部署到某些 WEB 应用项目中,点击类似弹出层功能时,只显示了遮罩层,而内容层则定位无法正确显示,下面所列是一些有关弹出层的功能,正确显示如下图:

 

 

但某些时候,会只显示遮罩层,无法显示弹出层,如下图:

原因分析

在浏览器显示内容中右击审查元素(360极速,edge则为检查元素),如下图:

发现遮罩层输出正常,为绝对定位,并设置正确了 left 、top、width、height 值,但排查到 css class 为 ke-dialog 的弹出层时,发现 position 定位缺失了 top 值,这应该是弹出层问题之所在。

范例运行环境

操作系统: Windows Server 2019 DataCenter

.net版本: .netFramework4.0 或以上

KindEditor version 4.1.7 (2013-04-21)

开发工具:VS2019  C# 

解决问题

修改 kindeditor.js

如下图,我们发现遮罩层的 z-index 值为 811212,弹出层的 z-index 值为 811213:

因此打开 kindeditor.js 核心文件进行查找修改,该文件存在于插件应用的根目录:

按 811213 进行查找,发现如下图代码:

可试图在 options 选项里增加初始的 top 属性值为 '100px',保存文件再试。 

C# 服务端更新

 在我的文章《C# 将 TextBox 绑定为 KindEditor 富文本》里我们创建了 KindEditor 类,可修改类代码,通过时间戳引入更新后的js版本,重写后的代码如下:

public class KindEditor{Page CurrentPage = null;public KindEditor(object page){if (page == null){return;}CurrentPage = (Page)page;}public string init(string[] idList){return init(idList, null);}public string init(string[] idList,Literal writeControl){TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);string timestamp= Convert.ToInt64(ts.TotalSeconds).ToString();HtmlLink cssLink = new HtmlLink();cssLink.Attributes.Add("rel", "stylesheet");cssLink.Href = "/common/kindEditor/themes/default/default.css";CurrentPage.Header.Controls.Add(cssLink);HtmlLink cssLink2 = new HtmlLink();cssLink2.Attributes.Add("rel", "stylesheet");cssLink2.Href = "/common/kindEditor/plugins/code/prettify.css";CurrentPage.Page.Header.Controls.Add(cssLink2);HtmlGenericControl sc = new HtmlGenericControl("script");sc.Attributes.Add("charset", "uft-8");sc.Attributes.Add("src", "/common/kindEditor/kindeditor.js?v="+timestamp);CurrentPage.Page.Header.Controls.Add(sc);HtmlGenericControl sc2 = new HtmlGenericControl("script");sc2.Attributes.Add("charset", "uft-8");sc2.Attributes.Add("src", "/common/kindEditor/lang/zh_CN.js");CurrentPage.Page.Header.Controls.Add(sc2);HtmlGenericControl sc3 = new HtmlGenericControl("script");sc3.Attributes.Add("charset", "uft-8");sc3.Attributes.Add("src", "/common/kindEditor/plugins/code/prettify.js");CurrentPage.Page.Header.Controls.Add(sc3);string js = fLoadFromFile(CurrentPage.Request.PhysicalApplicationPath + "common/kindEditor/init.js", Encoding.Default);HtmlGenericControl sc4 = new HtmlGenericControl("script");foreach (string id in idList){sc4.InnerHtml += js.Replace("{0}", id);}CurrentPage.Page.Header.Controls.Add(sc4);return "";}public string LoadFromFile(string PathFile,System.Text.Encoding encodtype){FileStream fs;StreamReader newsfile;String linec,x_filecon="";fs=new FileStream(PathFile,FileMode.Open);newsfile=new StreamReader(fs,encodtype); try{linec=newsfile.ReadLine();while(!(linec==null)){x_filecon+=linec+"\r\n";linec=newsfile.ReadLine();}newsfile.Close();fs.Close();}catch(Exception){newsfile.Close();fs.Close();}finally{newsfile.Close();fs.Close();}return x_filecon;}//LoadFromFile Function}

在 init 方法中生成时间戳变量 timestamp, 并在服务端 header 修改 sc.Attributes.Add("src", "/common/kindEditor/kindeditor.js?v="+timestamp);  的时间戳版引用,以便于调试修改和刷新。至此问题解决。 

小结

在调试成功完成后,可关闭时间戳版本引用方法以进行缓存操作,防止每次都重新加载文件内容。

关于弹出层显示如果不修改代码,还可以使用一种消极方法进行操作,即点击其全屏功能,如下图:

全屏后兼容性比较好,未出现弹出层定位不准的问题,但如果在整体操作界面上来说,来回的切换全屏模式比较繁琐。

到此关于修改解决 KindEditor 弹出层问题就介绍到这里,感谢您的阅读,希望本文能够对您有所帮助。

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=gm5dcnyf0pvm

相关文章:

C#结合JS 修改解决 KindEditor 弹出层问题

目录 问题现象 原因分析 范例运行环境 解决问题 修改 kindeditor.js C# 服务端更新 小结 问题现象 KindEditor 是一款出色的富文本HTML在线编辑器,关于编辑器的详细介绍可参考我的文章《C# 将 TextBox 绑定为 KindEditor 富文本》,这里我们讲述在…...

二开的精美UI站长源码分享论坛网站源码 可切换皮肤界面

二开的精美UI站长源码分享论坛网站源码 可切换皮肤界面 二开的精美UI站长源码分享论坛网站源码 可切换皮肤界面...

【diffusers极速入门(三)】生成的图像尺寸与 UNet 和 VAE 之间的关系

先上结论,一句话总结即: SD 图片的输入\输出尺寸(高或宽) Unet 输入\输出的样本尺寸(高或宽) x VAE 的缩放尺寸 在使用生成模型时,特别是图像生成任务中,理解 UNet 和 VAE&#xf…...

react实现窗口悬浮框,可拖拽、折叠、滚动

1、效果如下 2、如下两个文件不需要修改 drag.js import React from "react"; import PropTypes from "prop-types";export default class DragM extends React.Component {static propTypes {children: PropTypes.element.isRequired};static defaultP…...

52【场景作图】空间感

参考 场景绘制,画面空间感如何拉开?分分钟就能学会的场景优化思路更新啦!_哔哩哔哩_bilibili https://www.bilibili.com/video/BV1pa411J7Ps/?spm_id_from333.337.search-card.all.click&vd_source20db0c4e2d303527ed13c4b9cdf698ec 1 …...

SpringBoot系列之搭建WebSocket应用

SpringBoot系列之ServerEndpoint方式开发WebSocket应用。在实时的数据推送方面,经常会使用WebSocket或者MQTT来实现,WebSocket是一种不错的方案,只需要建立连接,服务端和客户端就可以进行双向的数据通信。很多网站的客户聊天&…...

RK3568技术笔记十四 Ubuntu创建共享文件夹

单击“虚拟机”,单击“设置”,如图所示: 单击“选项”,选择“总是启用(E)”,单击“添加”,如图所示: 单击“下一步”,如图所示: 单击“浏览”添加…...

JavaScript 获取地理位置 Geolocation

在现代的 web 应用程序中,获取用户的地理位置信息是一项常见的需求。这可以用于提供个性化内容、本地化服务或者基于位置的功能。HTML5 引入了 Geolocation API,使得从浏览器中获取地理位置信息变得非常简单。 1. Geolocation API 简介 Geolocation AP…...

android串口助手apk下载 源码 演示 支持android 4-14及以上

android串口助手apk下载 1、自动获取串口列表 2、打开串口就开始接收 3、收发 字符或16进制 4、默认发送at\r\n 5、android串口助手apk 支持android 4-14 (Google seral port 太老) 源码找我 需要 用adb root 再setenforce 0进入SELinux 模式 才有权限…...

windows11 生产力工具配置

一、系统安装 官方windows11.iso镜像文件安装操作系统时,会强制要求联网验证,否则无法继续安装操作系统,跳过联网登录账号的方式为:按下【shiftF10】快捷键,调出cmd命令窗口,输入命令 OOBE\BYPASSNRO 等…...

Nacos配置中心不可用会有什么影响

服务端: Nacos的数据存储接口 com.alibaba.nacos.config.server.service.DataSourceService 有两种实现: 如果指定了mysq 作为数据库,则必须使用 mysql 如果是 集群方式部署Nacos,则必须使用mysql 如果是单例方式部署 并且 没…...

AI时代下的自动化代码审计工具

代码审计工具分享 吉祥学安全知识星球🔗除了包含技术干货:Java代码审计、web安全、应急响应等,还包含了安全中常见的售前护网案例、售前方案、ppt等,同时也有面向学生的网络安全面试、护网面试等。 这两年一直都在提“安全左移”&…...

不懂索引,简历上都不敢写自己熟悉SQL优化

大家好,我是考哥。 今天给大家带来MySQL索引相关核心知识。对MySQL索引的理解甚至比你掌握SQL优化还重要,索引是优化SQL的前提和基础,我们一步步来先打好地基。 当MySQL表数据量不大时,缺少索引对查询性能的影响不会太大&#x…...

C# 设置PDF表单不可编辑、或提取PDF表单数据

PDF表单是PDF中的可编辑区域,允许用户填写指定信息。当表单填写完成后,有时候我们可能需要将其设置为不可编辑,以保护表单内容的完整性和可靠性。或者需要从PDF表单中提取数据以便后续处理或分析。 之前文章详细介绍过如何使用免费Spire.PDF…...

面试篇-求两个有序数组的交集

题目 两个有序数组,第一个有序数组m是1000w个元素,第二个有序数组n是1000个元素,求交集,需要考虑时间复杂度和空间复杂度。 解题思路 解法1:遍历小数组n,在m数组中进行折半查找,根据数组有序…...

Web爬虫-edu_SRC-目标列表爬取

免责声明:本文仅做技术交流与学习... 爬取后,结合暗黑搜索引擎等等进行进一步搜索. edu_src.py import requests, time from bs4 import BeautifulSoup for i in range(1, 20):url fhttps://src.sjtu.edu.cn/rank/firm/0/?page{i}print(f"正在获取第{i}页数据")s …...

云原生周刊:Harbor v2.11 版本发布 | 2024.6.17

开源项目推荐 Descheduler Descheduler 是一个工具,可用于优化 Kubernetes 集群中 Pod 的部署位置。它可以找到可以移动的 Pod,并将其驱逐,让默认调度器将它们重新调度到更合适的节点上。 Prowler Prowler 是一款适用于 AWS、Azure、GCP …...

低版本火狐浏览器报错:class is a reserved identifier

低版本火狐浏览器报错:class is a reserved identifier 原因:react-dnd,dnd-core 等node包的相关依赖有过更新,使得在低版本火狐浏览器中不支持 class 解决方法:在使用webpack打包构建时,编译排除node_modu…...

掌握高等数学、线性代数、概率论所需数学知识及标题建议

在数学的广袤领域中,高等数学、线性代数和概率论作为三大核心分支,不仅在理论研究中占据重要地位,更在实际应用中发挥着举足轻重的作用。为了深入理解和掌握这三门学科,我们需要掌握一系列扎实的数学知识。 高等数学所需数学知识 …...

value_and_grad

value_and_grad 是 JAX 提供的一个便捷函数,它同时计算函数的值和其梯度。这在优化过程中非常有用,因为在一次函数调用中可以同时获得损失值和相应的梯度。 以下是对 value_and_grad(loss, argnums0, has_auxFalse)(params, data, u, tol) 的详细解释&a…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

什么是EULA和DPA

文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码:HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&:逻辑与 ||:逻辑或 !:逻辑非 短路求值 位运算符 按位与&: 按位或 | 按位取反~ …...