sharepoint 編輯模式下頁面的自定義樣式

Question

如果當前加載的頁面處於編輯模式，我希望母版頁中的以下代碼片段運行如下：

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

簡單地說，我的腳本會將edit-mode class 添加到html標簽，就是這樣。

我怎樣才能做到這一點？

謝謝

Answer 1

您可以使用 PublishingWebControls:EditModePanel 控件。 當頁面處於編輯模式時，此控件將處理此標記中包含的信息。

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

Answer 2

要獲得所需的結果，您需要在母版頁中添加以下代碼。

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

Answer 3

由於沒有 SharePoint 專家，我已經做了一個解決方法來解決我的問題，下面我的解決方案有兩個版本，第一個是 jQuery，第二個是使用純 Z686155AF75A60A0F6E9D80C1F7EDD3E9，

主要是我試圖尋找僅在編輯模式下存在的特殊類，例如.ms-SPZoneLabel是 class 在編輯模式下包裝 web 部分區域， .edit-mode-panel是一個字段 ZA2F2ED4F8EBC2CBB4DC2 進入 AB61DZC2文章頁面中的數據，以及 wiki 頁面中.ewiki-margin ...

// 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';
    }

})();

如果有人有更好的解決方案（比如在服務器端確定的 ASP 標簽），請寫下您的解決方案

Answer 4

如果您將其用作書簽，則此代碼確實有效：

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();

我試圖將它轉換為普通的 Javascript，但它在我的 firefox Javascript 控制台中不起作用。

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();   
},

如果有人能讓它在普通的 javascript 中工作，我很感興趣：它告訴我：錯誤：TypeError。 thisdocument.forms：aspnetForm 未定義 源文件：Javascript 命令行：2

小書簽來自這個人的網站： http://blog.mastykarz.nl/sharepoint-developer-bookmarklets/

這是另一個。 它在側邊欄打開的情況下啟動編輯頁面。 這對我來說很好用：

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;
    }   
},