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>

问题

导入正常。但我注意到，每次修改和保存内容时，都会为每个保存到具有附加功能的所有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中的属性以及内容编辑器Web部件中显示的内容都可以进行编辑。然后，当再次保存页面时，将保存DOM中的New属性。

我不确定这个理论是否正确。任何有关确定正在发生的事情和任何可能的修复的帮助将不胜感激。提前致谢。

Answer 1

我和SP2013有同样的问题。我使用以下脚本暂时在本地修复它：

（＆＃39; 此＆＃39;是您希望将其删除的元素）

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

<强>之前：

<强>后：