Sharepoint 2010/Jquery - 在內容編輯器中添加多個屬性webpart編輯/保存

Question

我目前正在將我們的CMS從MCMS 2002遷移到SharePoint 2010.其中一個MCMS模板允許用戶添加自己的CSS和腳本。爲了不刪除腳本和樣式，我不得不將它們的內容導入到內容編輯器Web部件中。以下代碼是導入內容的示例。

<style type="text/css"> 
    ul#oakTabs { margin-left: 0; width: 100%; } 
    ul#oakTabs li { display:inline; border: 1px solid #00CC99; cursor: pointer; background-color: #FFF; margin-right: 4px; padding: 2px 5px; color: #444455; height: 20px; line-height: 14px; font-weight: bold; } 
    ul#oakTabs li.selected { border: 1px solid #009966; color: #FFFFFF; font-weight: bold; margin-right: 4px; padding: 2px 5px; text-decoration: none; background-color: #66CC99; background-image: none; height: 20px; } 
    ul#oakTabs li span.tabArrowDown { position: relative; top: 5px; background-image: url(/Images/etsp/tabarrowdown.gif); background-repeat: no-repeat;padding: 0 7px 0 0; margin: 0; } 
    ul#oakTabs li span.tabArrowUp { position: relative; top: 5px; background-image: url(/Images/etsp/tabarrowup.gif); background-repeat: no-repeat; padding: 0 7px 0 0; margin: 0; } 
    .tabContent { background-color: #FFF; margin: 0 0 10px 0; padding: 15px 10px 5px 20px; border-top: 3px solid #006600; border-right: 1px solid #CCC; border-bottom: 4px solid #006600; border-left: 1px solid #CCC; width: 100%; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#oakTab01Btn").click(function() { 
      $("#oakTabCont01").slideToggle("normal"); 
      $("#oakTab01Btn").toggleClass("selected"); 
      $("#oakTab01Btn span").toggleClass("tabArrowUp"); 
      $("#oakTabCont02, #oakTabCont03").slideUp("normal"); 
      $("#oakTab02Btn, #oakTab03Btn").removeClass("selected"); 
      $("#oakTab02Btn span, #oakTab03Btn span").removeClass("tabArrowUp").addClass("tabArrowDown"); 
     }); 

     $("#oakTab02Btn").click(function() { 
      $("#oakTabCont02").slideToggle("normal"); 
      $("#oakTab02Btn").toggleClass("selected"); 
      $("#oakTab02Btn span").toggleClass("tabArrowUp"); 
      $("#oakTabCont01, #oakTabCont03").slideUp("normal"); 
      $("#oakTab01Btn, #oakTab03Btn").removeClass("selected"); 
      $("#oakTab01Btn span, #oakTab03Btn span").removeClass("tabArrowUp").addClass("tabArrowDown"); 
     }); 

     $("#oakTab03Btn").click(function() { 
      $("#oakTabCont03").slideToggle("normal"); 
      $("#oakTab03Btn").toggleClass("selected"); 
      $("#oakTab03Btn span").toggleClass("tabArrowUp"); 
      $("#oakTabCont01, #oakTabCont02").slideUp("normal"); 
      $("#oakTab01Btn, #oakTab02Btn").removeClass("selected"); 
      $("#oakTab01Btn span, #oakTab02Btn span").removeClass("tabArrowUp").addClass("tabArrowDown"); 
     }); 
    });  
</script> 


<div id="oakPageTabs"> 
    <ul id="oakTabs"> 
     <li id="oakTab01Btn">Menu 1 <span class="tabArrowDown">&nbsp;</span></li> 
     <li id="oakTab02Btn">Menu 2 <span class="tabArrowDown">&nbsp;</span></li> 
     <li id="oakTab03Btn">Menu 3 <span class="tabArrowDown">&nbsp;</span></li> 
    </ul> 
</div> 
<div style="display: none" id="oakTabCont01" class="tabContent"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt ut labore et dolore magna aliqua.</p> 
</div> 
<div style="display: none" id="oakTabCont02" class="tabContent"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt ut labore et dolore magna aliqua.</p> 
</div> 
<div style="display: none" id="oakTabCont03" class="tabContent"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
     incididunt ut labore et dolore magna aliqua.</p> 
</div> 

的問題

的導入工作正常。但我注意到，每次內容被修改和保存時，jquery屬性都會添加到每個保存到所有具有附加功能的HTML元素。附加屬性似乎只在編輯內容然後保存時添加。這裏是代碼的例子。

<ul id="oakTabs"> 
    <li id="oakTab01Btn" jquery17107623806633942214="1" jquery17103491321314889904="1" 
     jquery17102665908125207371="1" jquery1710870082776749848="1">Menu 1 <span class="tabArrowDown"> 
      &#160;</span></li> 
    <li id="oakTab02Btn" jquery17107623806633942214="2" jquery17103491321314889904="2" 
     jquery17102665908125207371="2" jquery1710870082776749848="2">Menu 2 <span class="tabArrowDown"> 
      &#160;</span></li> 
    <li id="oakTab03Btn" jquery17107623806633942214="3" jquery17103491321314889904="3" 
     jquery17102665908125207371="3" jquery1710870082776749848="3">Menu 3 <span class="tabArrowDown"> 
      &#160;</span></li></ul> 

事情知道

• 這是在SharePoint發佈網站的所有發佈功能開啓。
• 除了編寫多餘的屬性，jquery可以正常工作。
• 該問題可以通過啓動頁面佈局在nightandday.master上的新發布站點中複製。

我的理論

當頁面加載jQuery的加載屬性的DOM。然後，當保存內容編輯器Web部件時，SharePoint會抓取DOM並用新屬性保存HTML。然後，當頁面打開進行編輯時，SharePoint會靜態加載內容，但JQuery仍會將屬性寫入DOM。因此，DOM中現在有一個屬性，內容編輯器Web部件中顯示的內容用於編輯。然後當頁面再次被保存時，DOM中的New屬性被保存。

我不確定這個理論是否正確。任何幫助確定究竟發生了什麼和任何可能的修復將不勝感激。提前致謝。

Answer 1

我與SP2013有同樣的問題。我暫時固定在本地使用下面的腳本：

（「這」是它刪除你想要的元素）

var attributes = this.attributes; 
for(var i = 0; i < attributes.length; i++) { 
    if(attributes[i].nodeName.substring(0,6) == "jquery") { 
     this.removeAttributeNode(attributes[i]); 
     --i; 
    } 
} 

可以看出在Chrome瀏覽器開發工具：

之前：

後：