html - 保存富字段后，Microsoft Sharepoint 将 "External Class"添加到我的 CSS

Question

所以我对 Sharepoint 很陌生，但我对 HTML 和 CSS 有足够的经验。我目前制作了这个迷你 html 应用程序来更改悬停时超链接的一些图片，如果我在普通浏览器/sharepoint 之外运行它，它工作正常。

现在的问题如下，我进入 sharepoint 并在一个 rich field 中编写我的代码(这让我可以选择将 html 嵌入其中)但它不起作用。它会在“编辑模式”下工作，但在保存后不会。同样在保存 HTML 代码之后，它会在我的每个 CSS 对象旁边生成一个名为“外部类”的东西，如下所示。这就是为什么我的代码在保存后不起作用的原因吗？ Sharepoint 对我的 HTML 代码做了什么？有没有办法来解决这个问题？如果能在这方面提供帮助，我将不胜感激。

原文:

            <style type="text/css">
                        #map
                        {
                                   width:663px;
                                   height:715px;
                                   background-image:url("/sites/00172/SiteAssets/Germany1-Standard.png");
                        }
                        #Bremen
                        {
                                   position:absolute;
                                   width:37px;
                                   height:53px;
                                    top:359px;
                                   left:243px;
                                   background-image:none;
                        }
                        #Berlin
                        {
                                   position:absolute;
                                   width:35px;
                                   height:55px;
                                   top:393px;
                                   left:550px;
			           background-image:none;
                        }
                        
                        #Coburg
                        {
                                   position:absolute;
                                   width:41px;
                                   height:54px;
                                   top:605px;
                                   left:382px;
			           background-image:none;
                        }
                        #Hallstadt-Bamberg
                        {
                                   position:absolute;
                                   width:43px;
                                   height:51px;
                                   top:659px;
                                   left:368px;
                                   background-image:none;
                        }
                        
                        #Bremen:hover
		{
			background-image:url("/sites/00172/SiteAssets/Germany1-Bremen.png");
		}
		
		#Berlin:hover
		{
			background-image:url("/sites/00172/SiteAssets/Germany1-Berlin.png");
		}
		
		#Coburg:hover
		{
			background-image:url("/sites/00172/SiteAssets/Germany1-Coburg.png");
		}
		
		#Hallstadt-Bamberg:hover
		{
			background-image:url("/sites/00172/SiteAssets/Germany1-Hallstadt.png");

		}
            </style>

            <div id="map">
                        <a href="/sites/00172/Lists/Calendar01/calendar.aspx" title="Bremen" id="Bremen">
                        <a href="/sites/00172/Lists/Calendar02/calendar.aspx" title="Berlin" id="Berlin">
                        <a href="/sites/00172/Lists/Calender03/calendar.aspx" title="Coburg" id="Coburg">
                        <a href="/sites/00172/Lists/Calendar04/calendar.aspx" title="Hallstadt-Bamberg" id="Hallstadt-Bamberg">
            </div>

在 Sharepoint 中保存后:

            <style unselectable="on">
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #map {
width:663px;
height:715px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Bremen {
position:absolute;
width:37px;
height:53px;
top:83px;
left:209px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Berlin {
position:absolute;
width:35px;
height:55px;
top:118px;
left:516px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Coburg {
position:absolute;
width:41px;
height:54px;
top:605px;
left:382px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Hallstadt-Bamberg {
position:absolute;
width:43px;
height:51px;
top:209px;
left:83px;
}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Bremen:hover {

}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Berlin:hover {

}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Coburg:hover {

}
 
AFC97320FBA74F4E88F2B1AD1F833E02 .ExternalClass #Hallstadt-Bamberg:hover {

}
</style>
 

<div id="map" unselectable="on">
                        <a title="Bremen" id="Bremen" href="/sites/00172/Lists/Calendar01/calendar.aspx" unselectable="on">
                        </a><a title="Berlin" id="Berlin" href="/sites/00172/Lists/Calendar02/calendar.aspx" unselectable="on">
                        </a><a title="Coburg" id="Coburg" href="/sites/00172/Lists/Calendar03/calendar.aspx" unselectable="on">
                        </a><a title="Hallstadt-Bamberg" id="Hallstadt-Bamberg" href="/sites/00172/Lists/Calendar04/calendar.aspx" unselectable="on">
            </a></div>

Answer 1

当您将 HTML 直接输入内容编辑器 Web 部件时，SharePoint 会执行一些额外的工作来“清理”您的 HTML/CSS 并防止命名冲突。

如果您希望 SharePoint 单独保留您的 HTML/CSS/JavaScript，而不是直接将其输入到内容编辑器 Web 部件中，请将其另存为文档库中的文本或 HTML 文件，然后使用内容编辑器 Web 部件的“内容链接”属性以嵌入所需的文件。这将使您的原始标记和代码保持不变。