Wikipedia app for Microsoft Office
Table of Contents
Overview
This project is a Microsoft app for Office used in Word 2013 and Excel 2013. It helps you quickly access Wikipedia content from Office and simplifies the process of referencing text and images.
The Wikipedia app will automatically search topics based on the selection in your Office document and display results in the Task Pane. Wikipedia content in the Task Pane is optimized for easy navigation and reading. Content is organized into sections, and tabs allow you to focus on text and images or just images.
Inserting Wikipedia content is a snap: simply select the Wikipedia content you are interested in, and with one click the app will instantly insert a quotation into your document.
Note
This is a taskpane add-in that is launched from the ribbon. When you press F5 in Visual Studio, Word or Excel will open. On the Home tab of the ribbon, there will be a new group called Wikipedia with an Open button. Press Open to launch the add-in.
Download Wikipedia app and have a try.
Structure of the source code
In the project, Wikipedia_devWeb is responsible for UI handling and interaction with user, SandboxWeb is dedicated to calling Wikipedia APIs for search. The communication between them depends on iframe postMessage with sandbox tag that makes the cross-domain communication possible.
- Wikipedia_devWeb that is responsible for UI handling, sending search keywords to SandboxWeb and receiving search results from SandboxWeb.
| File | Description |
|---|---|
| Scripts/en-us/Strings.js | Defines all the string contants |
| Scripts/Wikipedia_navigation.js | Handles the page's navigation with the existing state, for example, go back to the previous page |
| Scripts/Wikipedia_tabs.js | Determines which tabs(Sections, Images, Infobox, References) and menu options to show depending on the width of containing element |
| Scripts/Wikipedia_ui.js | Handles the UI element's status and events in html page and interacts with the Office client |
| Scripts/Wikipedia_utils.js | Constructs html contents and handles strings |
| Scripts/Wikipedia_vars.js | Sets all the variables |
| Styles/App.css | Defines the specific style of the app |
| Styles/OxgAgaveStyle.css | Defines the general style for the app |
| Styles/OxgNavigationStyle.css | The style defitions of Navigation UI control |
| Wikipedia_dev.html | The app's UI page |
- SandboxWeb that calls Wikipedia APIs for search and returns the valid results to Wikipedia_devWeb.
| File | Description |
|---|---|
| Scripts/en-us/sandbox_strings.js | Defines all the string contants in the Sandbox side |
| Scripts/sandbox.js | Querys the article contents through Wikipedia's API and filters out the undesired images or other media that will be posted back |
| sandbox.html |
APIs and libraries
this.tryUpdatingSelectedWord = function (autoSearchIsOn, milliSecond)at line 1222 in Wikipedia_ui.js
If you want to use Office.context.document.getSelectedDataAsync to get the text selected by the user in Office client, you can refer to this. Please pay attention to the differences of string handling between Word & Excel.this.insertText = function (text)at line 1317 in Wikipedia_ui.js
If you want to use Office.context.document.setSelectedDataAsync to insert text into Office client, you can refer to this. Please pay attention to the differences of inserted content handling between Office.CoercionType.Html & Office.CoercionType.Text.this.insertImage = function (fullHTML)at line 1331 in Wikipedia_ui.js
You can refer to this for inserting image into Word.
Buiding projects
1. Prerequisites:
Install the following components before you get started:
a. Visual Studio 2012 and Microsoft Office Developer Tools for Visual Studio 2012.
_ For information about downloading Visual Studio 2012 or later, see "Tools" on http://msdn.microsoft.com/en-US/office/apps/fp123627._
b. Word 2013 or Excel 2013.
2. Set up for debugging and run the Wikipedia app:
a. Start Visual Studio.
b. Launch the Wikipedia_dev project.
c. Update the URLs of Wikipedia_devWeb and Sandbox:
I. Check the URL of Wikipedia_devWeb to make sure that it matches the wikipediaHostURL at line 277 of file sandbox.js.
II. Check the URL of Sandbox to make sure that it matches the sandBoxHostURL at line 278 of file Wikipedia_utils.js.
d. Click Start Debugging or press the F5 key.
I. All the .js files started with Wikipedia_ will be compiled as one file Wikipedia_dev.js in the same folder when you start running. You can see it after clicking 'Show All Files'.
II. If you want to know how to compile several .js files into one file. You can check Project Properties - Compile - Build Events...
copy /b $(ProjectDir)\Scripts\Wikipedia_vars.js+$(ProjectDir)\Scripts\Wikipedia_utils.js+$(ProjectDir)\Scripts\Wikipedia_navigation.js+$(ProjectDir)\Scripts\Wikipedia_sandbox.js+$(ProjectDir)\Scripts\Wikipedia_tabs.js+$(ProjectDir)\Scripts\Wikipedia_ui.js $(ProjectDir)\Scripts\Wikipedia_dev.js
More resources
Run an app for Office consistently in different browsers
Use Visual Studio 2012 to debug JavaScript code outside the running project
Use two-domain design for more secure communication with external content
Writing data from apps to Office documents