1

我目前正在将我们的 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 属性将被保存。

我不确定这个理论是否正确。任何帮助弄清楚到底发生了什么以及任何可能的修复将不胜感激。提前致谢。

4

1 回答 1

0

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

前：

在此处输入图像描述

后：

在此处输入图像描述

于 2013-02-13T17:02:41.593 回答