Word add in post

What is a Word add-in?

Word add-in is a user developed application that can be integrated with  Microsoft word and can interact with the content of the document using the word javascript API.

What  can we do using Microsoft word add-in?

• Adding different type of content to document
• bring external data in to office
• automate office documents
• Add breaks (line break, paragraph break etc)
• Text formatting (highlight, bold etc..)
• custom search options
• embed maps ,charts.
• Custom Ui design with fabric and many more things.

Why we use Word add-ins?

Some times our Requirements does not fulfil with pre-defined functions of the Microsoft word. At that time we can easily build functions as we needed and can integrate with those in to the Microsoft word. And office web add-ins are cross platform , So that we can run in office for windows, Mac, ios and office online.

How to start a project?

We can easily create word add-in using visual studio. In this tutorial I am using Microsoft visual studio 2015

Start new project and then select Templates -> visual c# -> office/sharepoint -> web add-ins -> word add-ins

if you do not see these templates, then you need to download office developer tools for visual studio 2015.

After creating your project, you will see lot of files. Office add-in consists with two main components.

Components of office add-in

Manifest

This is a xml file. This file consist of settings and configuration of the add-in. You can change the display name etc in that file

In the solution explorer we can see these files, under test-add-in part. You can see the manifest. open that file and see the xml contents.

 <DefaultSettings>
 <SourceLocation DefaultValue="~remoteAppUrl/Home.html" />
 </DefaultSettings>

Actually in a word add-in,  a html file is loaded in to the task pane of the Microsoft word. You can see the configuration for that part in above code. In the <sourceLocation> tag we have set the Home.html file as the default html view.

Webpage

In the solution explorer we can see these files, under test add in web part. There are two main files under web app. Those are home.html and home.js.

In the home.html we write normal html that we all know to design the content of the task pane. In the Home.js, we write functions to handle the word web add in.we will se how to write our own function in a later post.

How to run  the project ?

Click run arrow in visual studio to see the word web add-in. Then It will automatically generate self sign certificate and you will be asked to trust it.

Your html files are hosted in localhost. To load html file to Microsoft word, you need to trust the domain in your browser settings.  You can see this is a self sign certificate because of issued-by and issued-to are from same person. Click yes, then you will not face certificate problems.

This certificate is only for testing purposes. We will see how to deploy project in a later post.

Then It will open Microsoft word automatically and you can see a task pane like this

OMG!. we have build our first web add-in successfully. This is the default template we will get into the task pane at we run the default project. we can change those things and add new contents as we like. According to this template we can display the selected word in the task pane. Try it your self.

In the next post, we will see how to customise and how to  create our own design with the word add-in.

In this series, I want to create a custom Word Add-In and then start to build a set of REST API that are deployed as AWS Lambda functions that will allow us to Save As New, Check-Out, Check-In, Save, Release, Revise, Search and Open a word document that utilizes the AWS S3 bucket as the storage medium. Of course we will also have to create a series of database tables to manage the life-cycle of the data, and build a WPF client side application to go along with it.

In this blog we will create the Custom Word Add-in and then the following blogs will focus on each function in turn until we have a fully functioning application.

Visual Studio Solution

The first thing we need to do is create a new Visual Studio Solution and add the following Solution Folders. This may not be the final structure but its a good start.

Visual Studio Project

On the Word Solution Folder, Right Mouse click and select New Project from the secondary contextual menu.

Select the Word VSTO Add-In project template and pick Next

Within the Project Name field key in the name of the Project, and select Create.

Next we will add the Ribbon (Visual Designer), to do this Right Mouse Click on the Project and select New Item… from the secondary contextual menu.

Select the Ribbon (Visual Designer) item template, then key in the name for the new item, and pick Add.

Editing the Ribbon Visual Designer

To open the Ribbon Visual Designer, expand the ‘WordAddin_Project’ and then double click on the WordAddinPLM_Ribbon.vb file.

We can now ‘Drag and Drop’, Buttons and Menus into the ‘Group Box’, the first thing we will place into the Group Box will be a Menu.

Now the Menu item is placed, we can change the Label property to ‘PLM Lifecycle’.

Next we will expand the PLM Lifecycle menu, so we can drop Buttons and Menus into it, by Selecting the ‘Black Arrow’.

Repeat the process to add three Buttons and two Menu’s and rename them as shown below.

Then expand each of the menus adding the following buttons and again rename them.

Menu Images

Just to make it look a little prettier, I found a few images online for each of the menu items.

To add an image to a menu item, select one of the menu items and in the properties select Image…

If you don’t have any image Resources, select the Import… which will open a Explorer window, where you can select an image to add to the resources. Once you have an Image Resource, you can select the resource and pick Ok.

You can now do this for all the menu items.

Button Handler Name

The last step we want to do is a little house keeping, by selecting each button we can change the Design -> Name

Once this is completed for all Buttons, double click on each button this will add the Handler to the underlying code.

Imports Microsoft.Office.Tools.Ribbon

Public Class WordAddinPLM_Ribbon

    Private Sub WordAddinrPLM_Ribbon_Load(ByVal sender As System.Object, ByVal e As RibbonUIEventArgs) Handles MyBase.Load

    End Sub

    Private Sub Btn_NewDocument_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_NewDocument.Click

    End Sub

    Private Sub Btn_SaveDocument_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_SaveDocument.Click

    End Sub

    Private Sub Btn_CloseDocument_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_CloseDocument.Click

    End Sub

    Private Sub Btn_CheckIn_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_CheckIn.Click

    End Sub

    Private Sub Btn_CheckOut_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_CheckOut.Click

    End Sub

    Private Sub Btn_Freeze_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_Freeze.Click

    End Sub

    Private Sub Btn_Release_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_Release.Click

    End Sub

    Private Sub Btn_Obsolete_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_Obsolete.Click

    End Sub

    Private Sub Btn_NewRevision_Click(sender As Object, e As RibbonControlEventArgs) Handles Btn_NewRevision.Click

    End Sub

    Private Sub WordAddinrPLM_Ribbon_Close(sender As Object, e As EventArgs) Handles Me.Close

    End Sub

End Class

Testing

Now we have setup the Ribbon Add-On select the Start button to start debugging, this will start an instance of Word.

If Word does not start change the startup Project to the Word Add-in Project.

Once Word has started create a new Blank Document.

Change the active Ribbon tab to the Add-ins tab, we can now see our PLM Lifecycle Addin.

In a following Blog well start, to flesh out the rest of the project.

As the project champion for my community college’s Open Learning Lab, I help literally hundreds of students, faculty, and other academics get started with their own WordPress sites.

I often encounter people who prefer to write in Microsoft Word rather than the default WordPress post editor.

They’re comfortable with Word. They know Word.

They assume they need to write first in Word and then copy-and-paste into WordPress.

I used to think the same thing but I just discovered there’s an easier way to move Word into WordPress.

MS Word offers a way to write and post directly to a WordPress blog/site without using copy-and-paste.

While the method has been around for a long time apparently–it’s possible in Word 10, Word 13, and Word 16.

I’ve only just discovered it. It’s easy and it works well.

In many ways, it’s easier than copy-and-pasting content. In my explanation here, I’ll use Word 16 as an example. The others are similar but might appear slightly different.

Steps to Blog From Word to WordPress

Create the Document

The first step is to create a new Word document by using the “Blog Post” template.

From the Word File menu > New, you’ll be prompted to select either a blank document or a template.

You want to use “Blog Post” template. If you don’t see it displayed right away, try searching for it.

When the template opens with you’ll see that the normal Word menus and the “ribbon” have changed.

Basically the menus and buttons have been slimmed down to only what’s relevant to creating a post for your blog.

Here’s a partial screen shot of the slimmed down interface.

Writing Your Post

There are only three menus listed on the tool bar: File, Blog Post, and Insert.

The file menu is the standard Word file menu you can use to save a local copy, save as, print, etc.

The second menu/ribbon is labeled Blog Post and is shown in the screen shot above.

Except for the first five buttons on the left, the buttons available here correspond very closely to what you can do in the WordPress editor.

You can bold, italicize, change alignment, indent/outdent, change text color, change font size, and select paragraph/headings 1-6, etc.

I’ll get to those first five buttons in a moment when we want to actually publish.

To write your post, start typing. The first line has a horizontal rule below it and  says “[Enter Post Title Here].”

Replace that text field with your title for your post. This corresponds exactly to the WordPress title box.

Immediately below the horizontal rule is a line that identifies the blog account you have connected to Word.

If you haven’t connected it yet, it will only say “Account.” We’ll connect to your blog when we publish.

On the next line, you start typing and writing your post. Style it using the buttons just as would in the WordPress visual editor.

Adding Media

In WordPress we’re accustomed to using the “Add Media” button to insert graphics and other media.

The Word equivalent is the Insert menu. You also use the Insert menu to insert hyperlinks.

In many ways, the Word Insert menu offers capabilities beyond the normal WordPress Media Library since you can take advantage of Word’s regular insert features to not only insert pictures, but also shapes, SmartArt, screenshots, WordArt, symbols, and even Wikipedia quotes.

Connecting and Publishing Your Post

Once you’re finished and you think your post is ready to publish, you will need to connect Word to your WordPress site.

This need only be done the first time and you can have Word remember your connection.

Now we’re ready for those first five buttons on the left in the Blog Post menu, as shown here.

To connect Word to your site, you’ll need to select the Manage Accounts button. A dialog box opens listing all the sites you’ve connected to Word.

Of course since this is the first one, the list is blank. Select New, and another dialog box opens as shown below.

In this last dialog box, there’s a drop down menu to select your blog provider. Select WordPress. This is true for both WordPress.com and self-hosted WordPress sites.

On this next dialog box, the New WordPress Account box, you need to enter three things:

1. Blog post URL
2. Your user name for your WordPress site
3. Your WordPress password

You have the option to have Word remember your settings so you can skip this step in future posts. You also have some options for how pictures get handled.

The default is to upload pictures to your WordPress Media library. If you have an alternative server for images, you can configure Word to upload your images to that server and insert image-from-URL into WordPress.

Tip: The blog post URL is the address for your WordPress Site xmlrpc interface. It is typically of the form:
http(s):// <your blog URL> /xmlrpc.php

This entry is very picky, especially regarding whether you are using http or https.  (you are using https, right?)

Select OK. Select Close. And you’re ready to publish.

Once you have your site(s) entered and connected to Word, you can publish any post simply by selecting the Publish button.

If you have multiple sites connected, the Publish button becomes a drop-down menu listing your sites.

When you select Publish, the entire post gets uploaded including the graphics and media in just one step.

Pros & Cons of Using Word to Post to WordPress

Using Word has several advantages over using the default WordPress editor.

First, you can work offline. It also becomes easier to collaborate on a post or document with others in the draft phase–simply keep the Word draft copy in a sharable or cloud location and share the document with others.

This way you can collaborate with others without having to add them as  a user in your WordPress site. You can also get all those great additional graphics insertions such as WordArt, symbols, etc.

The downside of using Word is that while it is easy and the resulting post will look the same in WordPress as it did Word, there might be some additional messiness in the HTML.

Word, of course, is notorious for creating very poor HTML code from Word documents. This method isn’t as bad as saving to HTML from Word, but it’s not as clean as the native WordPress editor might create.

If it’s critical for your posts to have very clean, neat HTML code, you probably should use the WordPress editor.

The other potential downside is that it depends on the xmlrpc interface in WordPress. Xmlrpc has been around a long time and has its own share of criticism.

The WordPress API is beginning to displace much of what xmlrpc did before and some developers are calling for xmlrpc to be removed.

If that happens, then this trick won’t work. We’ll need someone to write an API interface.

By the way, xmlrpc doesn’t work with Google Docs. If you want to connect Google Docs to your WordPress blog and publish directly, you’ll have to use the WordPress Jetpack plugin.

Give it a shot and tell us what you think.

Do you use Microsoft Word to write WordPress posts? Here’s a simple way to blog directly from the application.

Using your WordPress blogging editor for the first time can be rather hectic. Having to learn the controls and figure out your way around is not easy. Luckily, you could use Microsoft Word instead of struggling with your blogging site editor.

Here are some instructions to guide you in setting up Microsoft Word to create and edit posts for your WordPress blog.

Set Your WordPress Blog Account to Accept Posts

Before trying to link your blog to your WordPress account, you need to ensure that it will accept any posts from Microsoft Word. Although most new versions of WordPress accept outside posts by default, it is best to confirm the status of your site before proceeding manually.

1. Go to the Admin settings in your WordPress blog account.
2. Click on Settings > Writing > Remote Publishing.
3. Check the XML-RPC.
4. Click Save Changes.

Method 1: Draft Your Blog Post Account From Microsoft Word

One of the simplest ways to use Microsoft Word for your blog post is to draft it on Word before copying it to your blog’s editor. This method gives you the freedom to format your blog fully before publishing it.

The only downside with this method is that it may not convert some formatting to HTML. However, you can solve this by pasting your text in another editor, such as Google Docs, before copying it into your blog editor.

You could also use HTML cleaning tools to get rid of extra formatting that the blogging editor may not feature.

Method 2: Link Your Microsoft Word to Your Blog Account

A better way would be to link your blog account to your Microsoft Word. The process is pretty simple and may save you the trouble of copy-pasting every now and then.

You can either link your Word to a new or existing blog post.

Registering New Blog

1. Open your Microsoft Word and click on File, then New, and select Blog post. Some versions may require you to click on Create.
   
2. You can also find it by performing a search using the search bar as shown below.
   
3. A dialog box will appear asking you to Register a Blog Account.
4. Click on Register Now. Feed-in all the necessary information as prompted.
   
5. Alternatively, click on the Blog Post tab, select the blog group and Click on Manage Accounts, then New.
   
6. A New Blog Account will appear. Here, click on the Blog drop-down arrow and select WordPress. Click Next.
7. Feed-in the required information such as your username, password, and your blog URL.
8. Change your Picture Options to determine whether you will directly upload the pictures from Word or through your WordPress blog editor.
   
9. Select OK to sign in to your account. Only do this when you are sure of all the details you have provided.
10. If this does not work, try linking Microsoft Word to your blog by using your account settings. Check out the Dashboard or Admin in your blog. Check out for Remote Publishing.

Link an Existing Blog

1. Open the New Blog Account dialog box in your Microsoft Word and click on your blog provider. For providers that are not listed here, click on Other.
   
2. Click on Next.
3. Fill in your account information as prompted. Your data should be accurate. Ensure to use your blog’s username and password.
   
4. Activate the pictures feature by clicking on Picture Options and indicating how you want to upload your images.
5. Click OK.

Write, Publish, Draft or Edit Your Blog Posts on Microsoft Word

After linking your blog post to your Microsoft Word, you are now ready to draft your content. You can do this by typing your text into the Blog post template you have created. You can also perform other tasks such as editing through these processes below.

Adding Content to Your Blog Post

1. Select your Blog Post Template.
2. If you want to apply styles, use the clipboard, enter basic text into your blog post, and click on Blog Post.
   

3. On the other hand, if you intend to add media such as hyperlinks, select the Insert tab.
   
4. Create the title for your blog post.
5. Place the cursor beneath the title and start typing in your content. You can format it as you wish.
   
6. Add a category to your post by clicking Insert Category.
7. When done with your post, click Publish.
8. You could choose to Publish as Draft. This option allows you to preview your blog post and see what it would look like if it went live.

Adding Images to a Post

1. Set your cursor to the intended picture location.
2. Select the Insert tab and click on Picture.
3. Browse the Insert Picture dialog box for the image you want to upload.
4. Select the image, then Insert.
5. Use the Picture tools to edit the pictures and change how they appear.
   

Adding Hyperlinks to Your Blog Post

1. Select your intended link text.
2. Click on the Insert tab.
3. Select Hyperlink.
4. Type the URL into the Address box.
5. Click OK.

Edit an Existing Blog Post

If you are working on a lengthy blog post or have to change something from an existing post, it is quite simple.

1. To edit an existing blog post using Word, go to File, select Open Existing, and choose your existing blog post.
2. Select the blog post you want to edit and click OK.
3. You can now edit your blog post as you desire.

Please note that these may vary across various versions of Word. However, you can easily find the necessary controls once you get the basic concept.

Adding Your Feature Image

Adding a featured image to your WordPress blog is one of the few things you cannot do directly from Microsoft Word.

To add a featured image to your blog post, you may have to directly insert it from your WordPress blog account.

Why Use Word to Post to WordPress

Using Word to post your WordPress blogs has a number of advantages. It allows you to work offline before adding your content to the blog account.

This option also allows you to share your blog post with other contributors without giving them access to your WordPress editor. Word also allows you access to special features and graphics such as Word Art.

Use Microsoft Word For Your Blogging Today

Setting up your blog and keeping it running has never been easy. You have to come up with plenty of relevant content and keep your readers hooked. You do not want to spend more time figuring your way around a complicated blog editor.

Using Microsoft Word will help you save plenty of time while maintaining a lovely and relevant blog for your readers.