Sharepoint 2010/Jquery-在内容编辑器Webpart中添加了多个属性编辑/保存 [英] Sharepoint 2010 / Jquery - Multiple attributes added in content Editor webpart edit / save

问题描述

我目前正在将CMS从MCMS 2002迁移到SharePoint2010.其中一个MCMS模板允许用户添加自己的CSS和脚本.为了不删除脚本和样式，我不得不将其内容导入到Content Editor Web部件中.以下代码是导入内容的示例.

I’m currently performing a migration of our CMS from MCMS 2002 to SharePoint 2010. One of the MCMS templates allowed the users to add their own CSS and scripts. So that the scripts and styles are not stripped I have had to import their content into a Content Editor Web Part. The following code is an example of what gets imported.

    <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属性.似乎只有在编辑然后保存内容后才能添加其他属性.这是代码示例的一个例子.

The import works fine. But I have noticed that each time the content gets modified and saved, a jquery attribute is added for each save to all the HTML elements with attached functions. The additional attributes appear to only be added when the content is edited and then saved. Here is an example fo what the code looks like.

 <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属性.

When the page is loaded Jquery loads the attributes to the DOM. Then when the content editor web part is saved, SharePoint grabs the DOM and saves the HTML with the new attributes. Then when the pages is opened for edit, SharePoint loads the content statically, but JQuery still writes the attributes to the DOM. So there is now an attribute both in the DOM and what is displayed in the content Editor web part for editing. Then when the page is saved again the New attribute in the DOM is saved.

我不确定这个理论是否正确.我们将不胜感激，以帮助您确定正在发生的情况以及可能的修复方法.提前致谢.

I am not sure if this theory is correct. Any help in working out what exactly is happening and any possible fixes will be greatly appreciated. Thanks in advance.

推荐答案

SP2013存在相同的问题.我使用以下脚本在本地临时修复了该问题:

I am having the same issue with SP2013. I temporarily fixed it locally by using the following script:

(' this '是您要从中删除的元素)

( 'this' being the element you want it removed from )

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开发工具中可以看到:

As seen in Chrome Dev Tools:

之前:

之后:

这篇关于Sharepoint 2010/Jquery-在内容编辑器Webpart中添加了多个属性编辑/保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！