在SharePoint2010中,如何正確找到Ribbon菜單中功能按鈕執行的事件代碼呢?

You clicked ribbon buttons a lot in SharePoint 2010. Sometimes, you as developer are interested in what code is executed when particular button is clicked. I’m going to show how you can easily find particular js handler for any ribbon button. For example, imagine you want to find what code is fire when you click “Edit HTML Source” drop down button in a rich text editor. First of all inspect this element using firebug, or any favorite browser’s dev tool:

image

Consider id attribute - Ribbon.EditingTools.CPEditTab.Markup.Html.Menu.Html.EditSource-Menu16. Next go to 14 hive and under TEMPLATE\GLOBAL\XML\ find cmdui.xml file. This file contains definition for all ribbon buttons in SharePoint. Search in this file by word Ribbon.EditingTools.CPEditTab.Markup.Html.Menu.Html.EditSource, you’ll find this definition:

image

This is definition for our button, and we are interested in Command attribute, which is equals to EditSource.

Next step is to search this command among SharePoint javascript files. Common architecture of ribbon handler involves javascript “classes” (essentially objects, javascript has no classes), which can handle particular command. Each class has canHandleCommand method. This method basically enumerate all commands which this class can handle and return true, if particular command name is in its list. So, search under 14\layouts using pattern *.js by word “EditSource”. You find several files, but it seems that SP.UI.Rte.debug.js is our file. Search inside this file and you can find that RTE.SPRichTextEditorComponentProvider is our class (“EditSource” command contains in an array inside init function). Find handleCommand method in this class (near 11328 line for me). In browser find this line and setup break, and then press “Edit HTML Source” to test it:

image

as you can see from screenshot above, breakpoint fire, $p0 parameter equals to “EditSource”, as expected. Next you can step into to find exact code, that will be fire:

image

this is RTE.RichTextEditor.editSource(). We found our handler! You can use this approach to find any other ribbon handlers, sometimes steps may differ, but I was trying to show common technique.

Hope this helps and good luck in spdevelopment!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章