C#結合JS修改解決KindEditor彈出層問題

更新時間：2024年06月18日 10:01:01 作者：初九之潛龍勿用

KindEditor 是一款出色的富文本HTML在線編輯器,這里我們講述在使用中遇到的一個問題,在部署到某些 WEB 應用項目中,點擊類似彈出層功能時,只顯示了遮罩層,而內容層則定位無法正確顯示,所以本文給大家介紹了C#結合JS 修改解決 KindEditor 彈出層問題

問題現(xiàn)象

KindEditor 是一款出色的富文本HTML在線編輯器，關于編輯器的詳細介紹可參考我的文章《C# 將 TextBox 綁定為 KindEditor 富文本》，這里我們講述在使用中遇到的一個問題，在部署到某些 WEB 應用項目中，點擊類似彈出層功能時，只顯示了遮罩層，而內容層則定位無法正確顯示，下面所列是一些有關彈出層的功能，正確顯示如下圖：

但某些時候，會只顯示遮罩層，無法顯示彈出層，如下圖：

原因分析

在瀏覽器顯示內容中右擊審查元素（360極速，edge則為檢查元素），如下圖：

發(fā)現(xiàn)遮罩層輸出正常，為絕對定位，并設置正確了 left 、top、width、height 值，但排查到 css class 為 ke-dialog 的彈出層時，發(fā)現(xiàn) position 定位缺失了 top 值，這應該是彈出層問題之所在。

范例運行環(huán)境

操作系統(tǒng)： Windows Server 2019 DataCenter

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

KindEditor version 4.1.7 (2013-04-21)

開發(fā)工具：VS2019 C#

解決問題

修改 kindeditor.js

如下圖，我們發(fā)現(xiàn)遮罩層的 z-index 值為 811212，彈出層的 z-index 值為 811213：

因此打開 kindeditor.js 核心文件進行查找修改，該文件存在于插件應用的根目錄：

按 811213 進行查找，發(fā)現(xiàn)如下圖代碼：

可試圖在 options 選項里增加初始的 top 屬性值為 '100px'，保存文件再試。

C# 服務端更新

在我的文章《C# 將 TextBox 綁定為 KindEditor 富文本》里我們創(chuàng)建了 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); 的時間戳版引用，以便于調試修改和刷新。至此問題解決。