Sharepoint 2010/Jquery: múltiples atributos agregados en el contenido Editor webpart edit/save
sharepoint-2010 (1)
Estoy teniendo el mismo problema con SP2013. Lo arreglé temporalmente localmente usando la siguiente secuencia de comandos:
('' este '' es el elemento del que desea que se elimine)
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;
}
}
Como se ve en Chrome Dev Tools:
Antes de:
Después:
Actualmente estoy realizando una migración de nuestro CMS de MCMS 2002 a SharePoint 2010. Una de las plantillas de MCMS permitió a los usuarios agregar sus propios CSS y scripts. Para que los guiones y los estilos no se hayan eliminado, he tenido que importar su contenido a un elemento web del Editor de contenido. El siguiente código es un ejemplo de lo que se importa.
<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"> </span></li>
<li id="oakTab02Btn">Menu 2 <span class="tabArrowDown"> </span></li>
<li id="oakTab03Btn">Menu 3 <span class="tabArrowDown"> </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>
El problema
La importación funciona bien. Pero me he dado cuenta de que cada vez que se modifica y guarda el contenido, se agrega un atributo jquery para cada guardar en todos los elementos HTML con funciones adjuntas. Los atributos adicionales parecen solo agregarse cuando el contenido se edita y luego se guarda. Aquí hay un ejemplo de cómo es el código.
<ul id="oakTabs">
<li id="oakTab01Btn" jquery17107623806633942214="1" jquery17103491321314889904="1"
jquery17102665908125207371="1" jquery1710870082776749848="1">Menu 1 <span class="tabArrowDown">
 </span></li>
<li id="oakTab02Btn" jquery17107623806633942214="2" jquery17103491321314889904="2"
jquery17102665908125207371="2" jquery1710870082776749848="2">Menu 2 <span class="tabArrowDown">
 </span></li>
<li id="oakTab03Btn" jquery17107623806633942214="3" jquery17103491321314889904="3"
jquery17102665908125207371="3" jquery1710870082776749848="3">Menu 3 <span class="tabArrowDown">
 </span></li></ul>
Cosas que saber
- Está en un sitio de publicación de SharePoint con todas las características de publicación activadas.
- El jquery funciona correctamente excepto para escribir atributos de excedente.
- El problema se puede replicar en un nuevo sitio de publicación en nightandday.master con el diseño de página de bienvenida.
Mi teoría
Cuando se carga la página, Jquery carga los atributos al DOM. Luego, cuando se guarda el elemento web del editor de contenido, SharePoint toma el DOM y guarda el HTML con los nuevos atributos. Luego, cuando se abren las páginas para editar, SharePoint carga el contenido estáticamente, pero JQuery aún escribe los atributos en el DOM. De modo que ahora hay un atributo tanto en el DOM como en lo que se muestra en el elemento web Editor de contenido para su edición. Luego, cuando la página se guarda de nuevo, se guarda el atributo Nuevo en el DOM.
No estoy seguro si esta teoría es correcta. Cualquier ayuda para averiguar qué está sucediendo exactamente y cualquier posible solución será muy apreciada. Gracias por adelantado.