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

 更新时间:2024年06月18日 10:01:01   作者:初九之潜龙勿用  
KindEditor 是一款出色的富文本HTML在线编辑器,这里我们讲述在使用中遇到的一个问题,在部署到某些 WEB 应用项目中,点击类似弹出层功能时,只显示了遮罩层,而内容层则定位无法正确显示,所以本文给大家介绍了C#结合JS 修改解决 KindEditor 弹出层问题

问题现象

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 弹出层问题就介绍到这里,感谢您的阅读,希望本文能够对您有所帮助。

以上就是C#结合JS修改解决KindEditor弹出层问题的详细内容,更多关于C# KindEditor弹出层的资料请关注脚本之家其它相关文章!

相关文章

  • Unity3D实现自动寻路

    Unity3D实现自动寻路

    这篇文章主要为大家详细介绍了Unity3D实现自动寻路,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • WPF实现多窗口多线程的实战详解

    WPF实现多窗口多线程的实战详解

    在WPF应用程序开发中,UI操作通常运行在主线程上,这使得复杂的计算或长时间运行的任务容易阻塞界面,导致用户体验下降,本文将深入探讨如何在新线程中创建并显示WPF窗口,分析其中的关键技术点,需要的朋友可以参考下
    2025-08-08
  • C#实现连接SQL Server2012数据库并执行SQL语句的方法

    C#实现连接SQL Server2012数据库并执行SQL语句的方法

    这篇文章主要介绍了C#实现连接SQL Server2012数据库并执行SQL语句的方法,结合实例形式较为详细的分析了C#连接SQL Server2012数据库并执行查询、插入等操作的相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • C#程序最小化到托盘图标操作步骤与实现代码

    C#程序最小化到托盘图标操作步骤与实现代码

    设置窗体属性showinTask=false;加notifyicon控件notifyIcon1,为控件notifyIcon1的属性Icon添加一个icon图标;添加窗体最小化事件(首先需要添加事件引用)接下来介绍实现代码,感兴趣的朋友可以研究下
    2012-12-12
  • c#中?的六种用途

    c#中?的六种用途

    ? 是一个多用途的符号,具有多种不同的用途,本文主要介绍了c#中?的六种用途,具有一定的参考价值,感兴趣的可以了解一下
    2025-04-04
  • C#操作SQLite实现数据的增删改查

    C#操作SQLite实现数据的增删改查

    SQLite是一个轻量级、跨平台的关系型数据库,在小型项目中,方便,易用,同时支持多种开发语言。本文将用C#语言对SQLite 的一个封装,实现数据的增删改查。需要的可以参考一下
    2022-01-01
  • C#中多线程ManualResetEvent 与 AutoResetEvent 区别

    C#中多线程ManualResetEvent 与 AutoResetEvent 区别

    这篇文章主要介绍了C#中ManualResetEvent 与 AutoResetEvent 区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 使用C#与SQL Server数据库进行交互的详细步骤

    使用C#与SQL Server数据库进行交互的详细步骤

    在C#中与数据库进行交互,通常使用ADO.NET(ActiveX Data Objects .NET)框架,ADO.NET是.NET Framework中用于数据访问的一组类库,它提供了多种用于连接和操作数据库的方法,以下是使用C#与SQL Server数据库进行交互的详细步骤,需要的朋友可以参考下
    2024-08-08
  • C#观察者模式(Observer Pattern)实例教程

    C#观察者模式(Observer Pattern)实例教程

    这篇文章主要介绍了C#观察者模式(Observer Pattern),主要以一个实例的形式讲述了C#观察者模式的实现过程,详细讲述了接口的定义、通知及动作的实现方法,需要的朋友可以参考下
    2014-09-09
  • C#中 paint()与Onpaint()的区别

    C#中 paint()与Onpaint()的区别

    paint是事件onpaint方法onpaint方法是调用paint事件的,用哪一个,效果是一样,就看那一个方便了内部是这样实现的:
    2013-04-04

最新评论