le style sharepoint personnalisé pour la page en mode édition

Question

Je veux l'extrait de code suivant dans la page principale à exécuter si la page chargée en cours est en mode d'édition comme suit:

<!-- If edit mode, then add the following script --> 
<script type="text/javascript"> 
    document.documentElement.className += ' edit-mode'; 
</script> 
<!-- End if --> 

simplement, mon script ajoutera une classe edit-mode à l'étiquette html, c'est tout.

comment puis-je faire cela?

Merci

Answer 1

Vous pouvez utiliser les PublishingWebControls: contrôle EditModePanel. Ce contrôle traitera les informations incluses dans cette balise lorsque la page est en mode d'édition.

<PublishingWebControls:EditModePanel runat="server" id="IncludeEditModeClass" > 
    <asp:Content> 
     <script type="text/javascript"> 
       document.documentElement.className += ' edit-mode'; 
     </script> 
    </asp:Content> 
</PublishingWebControls:EditModePanel> 

Answer 2

car il n'y a pas des experts SharePoint, je l'ai fait une solution pour résoudre mon problème, et au-dessous ma solution en deux versions, d'abord en jQuery, et le second en utilisant JavaScript pur,

principalement i essayé de rechercher des classes spéciales qui existent uniquement en mode édition, par exemple .ms-SPZoneLabel est la classe qui enveloppe une zone de partie Web en mode édition, .edit-mode-panel est une classe qui enveloppe un champ pour entrer des données dans les pages article, et .ewiki-margin dans les pages wiki ...

// jQuery version 
$(function(){ 
    if ($('.ms-SPZoneLabel, .edit-mode-panel, .ewiki-margin').length) { 
     document.documentElement.className += ' edit-mode'; 
    } 
}); 

// pure javascript way 
(function(){ 

    // defining fall back getElementsByClassName if not exist (IE) 
    if(!document.getElementsByClassName) { 
     document.getElementsByClassName = function(cl) { 
      var retnode = []; 
      var myclass = new RegExp('\\b'+cl+'\\b'); 
      var elem = this.getElementsByTagName('*'); 
      for (var i = 0; i < elem.length; i++) { 
       var classes = elem[i].className; 
       if (myclass.test(classes)) { 
        retnode.push(elem[i]); 
       } 
      } 
      return retnode; 
     }; 
    } 
    // then checking if there's any webpart zone in the page 
    if(document.getElementsByClassName('ms-SPZoneLabel').length || 
     document.getElementsByClassName('edit-mode-panel').length || 
     document.getElementsByClassName('ewiki-margin').length) { 
     document.documentElement.className += ' edit-mode'; 
    } 

})(); 

si quelqu'un a une meilleure solution (comme une balise ASP pour déterminer que le côté serveur) s'il vous plaît écrivez votre solution

Answer 3

Ce code ne fonctionne si vous l'utilisez comme un bookmarklet:

javascript:if%20(document.forms['aspnetForm']['MSOLayout_InDesignMode']%20!=%20null)%20document.forms['aspnetForm']['MSOLayout_InDesignMode'].value%20=%201;if%20(document.forms['aspnetForm']['MSOAuthoringConsole_FormContext']%20!=%20null)%20document.forms['aspnetForm']['MSOAuthoringConsole_FormContext'].value%20=%201;theForm.submit(); 

J'ai essayé de le convertir en plaine Javascript, mais il ne fonctionnera pas dans mon firefox Javascript Console.

SP_EditPage: function(){ 
    var thisdocument = window.content.document; 
    if (thisdocument.forms['aspnetForm']['MSOLayout_InDesignMode'] != null) 
     thisdocument.forms['aspnetForm']['MSOLayout_InDesignMode'].value = 1; 
    if (thisdocument.forms['aspnetForm']['MSOAuthoringConsole_FormContext'] != null) 
     thisdocument.forms['aspnetForm']['MSOAuthoringConsole_FormContext'].value = 1; 
     theForm.submit(); 
}, 

Je suis très intéressé si quelqu'un peut le faire fonctionner en javascript! Il me dit: Erreur: TypeError: thisdocument.forms.aspnetForm est pas défini Fichier source: Javascript commande ligne: 2

Le bookmarklet est venu sur le site de cet homme: http://blog.mastykarz.nl/sharepoint-developer-bookmarklets/

Voici un autre. Il démarre la page d'édition avec la barre latérale ouverte. Celui-ci fonctionne bien pour moi:

SP_EditPage: function(){ 
    var thisdocument = getBrowser().contentWindow.document; 
    if(thisdocument.location.href.search('ToolPaneView=') == -1){ 
     if (thisdocument.location.search.indexOf('?') == 0){ 
      thisdocument.location=(thisdocument.location.href + '&ToolPaneView=2'); 
     }else{ 
      thisdocument.location=(thisdocument.location.href + '?ToolPaneView=2'); 
     } 
    } else { 
     thisdocument.location=thisdocument.location.href; 
    } 
}, 

Answer 4

Pour obtenir le résultat souhaité, vous devez ajouter le morceau de code suivant dans le masterpage.

<script type="text/javascript"> 
 
\t \t var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value; 
 
\t \t 
 
\t \t if (inDesignMode == "1") 
 
\t \t { 
 
\t \t  // page is in edit mode 
 
\t \t \t \t <!-- If edit mode, then add the following script --> 
 
\t \t \t \t 
 
\t \t \t \t \t document.documentElement.className += ' edit-mode'; 
 
\t \t \t \t 
 
\t \t \t \t <!-- End if --> 
 
\t \t 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t  // page is in browse mode 
 
\t \t } 
 

 
    </script>