This post will explain how to post notes from Microsoft OneNote into the WordPress admin. When you copy and paste from most Microsoft products into a visual editor such as TinyMCE that WordPress uses you will typically include a bunch of unwanted tags from the Microsoft application. These tags will make it complicated to format correctly and can even spill over outside of your post and cause issues with your entire WordPress page. The method to input this data into WordPress will work with any of the Microsoft products such as Microsoft OneNote and Microsoft Word.
Below is an example of some basic formatted text copied directly from MS OneNote and pasted into WordPress’s visual editor.
- <p style="font-weight: bold; font-size: 14pt; margin: 0in 0in 0in 0.375in; font-family: Calibri;">Test Title From Microsoft OneNote</p>
- <p style="font-size: 11pt; margin: 0in 0in 0in 0.375in; font-family: Calibri;"> </p>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="1">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test line item number one.</span>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="a">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test sub line letter a.</span>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="i">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test a sub line letter i. </span></li>
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test a sub line letter ii. </span></li>
- </ol>
- </li>
- </ol>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="a">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test sub line letter b.</span>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="i">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test b sub line letter i.</span>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="1">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test I sub line number 1.</span></li>
- </ol>
- </li>
- </ol>
- </li>
- </ol>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="a">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test sub line letter c.</span></li>
- </ol>
- </li>
- </ol>
- <ol style="margin-top: 0in; font-size: 11pt; margin-bottom: 0in; margin-left: 0.375in; direction: ltr; font-family: Calibri; unicode-bidi: embed;" type="1">
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test line item number two.</span></li>
- <li style="margin-top: 0px; margin-bottom: 0px; vertical-align: middle;"><span style="font-size: 11pt; font-family: Calibri;">Test line item number three.</span></li>
- </ol>
As you can see there is a complete mess of tags included from copying from OneNote into the visual editor. To resolve this issue use the “Paste from Word” button that exists on the middle row toolbar if you have the TinyMCE Advanced plugin installed. This button also exists in the regular Visual Editor on the second row toolbar as well. The button exists in between the “Paste as Plain Text” button and the “Remove Formatting” button. The “Paste from Word” button is shown below with the arrow pointing upwards towards it.
When you click the button it will pop up a smaller window to paste the formatted text from MS OneNote or MS Word into it. What this will do is keep the formatting but simply the tags that are used for less clutter and to minimize the chance of having conflicting tags or any tags causing issues with the rest of your page. Below is how the example formatted text from OneNote, also used in the first example to show all of the tags, looks after being pasted into the Paste from Word pop up window and then clicking the insert button.
- Test Title From Microsoft OneNote
- <ol type="1">
- <li>Test line item number one.
- <ol type="a">
- <li>Test sub line letter a.
- <ol type="i">
- <li>Test a sub line letter i.</li>
- <li>Test a sub line letter ii.</li>
- </ol>
- </li>
- </ol>
- <ol type="a">
- <li>Test sub line letter b.
- <ol type="i">
- <li>Test b sub line letter i.
- <ol type="1">
- <li>Test I sub line number 1.</li>
- </ol>
- </li>
- </ol>
- </li>
- </ol>
- <ol type="a">
- <li>Test sub line letter c.</li>
- </ol>
- </li>
- </ol>
- <ol type="1">
- <li>Test line item number two.</li>
- <li>Test line item number three.</li>
- </ol>
Notice the difference in the amount of tags included in the post which provides the same results as the code shown in the first example. The only thing I did notice is that the title that was used was not bold after using the Paste from Word button. Regardless it is nice to have a way to easily copy from Microsoft products right into the visual editor and have the visual editor clean up the tags for you. If you paste directly from MS products this will save you tons of time.