编辑模式下页面的 sharepoint 自定义样式

Question

如果当前加载的页面处于编辑模式，我希望母版页中的以下代码片段运行，如下所示：

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

简单地说，我的脚本将向 htmledit-mode 类> 标签，就是这样。

我该怎么办？

谢谢

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

由于没有SharePoint专家，我已经做了一个解决方法来解决我的问题，下面我的解决方案有两个版本，第一个在jQuery中，第二个使用纯JavaScript，

主要是我试图寻找仅在编辑模式下存在的特殊类，例如 .ms-SPZoneLabel 是在编辑模式下包装 Web 部件区域的类，.edit-mode-panel 是包装字段以输入数据的类在文章页面中，以及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 3

如果您将其用作书签，此代码确实可以工作：

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

Answer 4

要获得所需的结果，您需要在母版页中添加以下代码。

<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>