Sharepoint 2010/Jquery-在内容编辑器Web部件编辑/保存中添加多个属性

我目前正在将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>

问题

进口商品很好用。但我注意到，每次修改和保存内容时，都会为所有带有附加函数的HTML元素的每次保存添加一个jquery属性。仅当编辑并保存内容时，才会添加其他属性。下面是代码的示例

 <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中以及在content Editor web部件中显示的内容中都有一个属性用于编辑。然后，当再次保存页面时，将保存DOM中的新属性

---

我不确定这个理论是否正确。如果您能帮助我们了解到底发生了什么，以及任何可能的修复方法，我们将不胜感激。提前谢谢

我对SP2013也有同样的问题。我使用以下脚本临时在本地修复了它：

“this”是要从中删除的元素

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开发工具所示：

之前：

之后：