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

问题现象

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); 的时间戳版引用，以便于调试修改和刷新。至此问题解决。