Last active
February 16, 2023 01:03
-
-
Save xuruiyao-msft/99845dec2f824dc9af8f392ea1e26294 to your computer and use it in GitHub Desktop.
Create a new snippet from a blank template.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: ContentControl&Save Demo | |
description: Create a new snippet from a blank template. | |
host: WORD | |
api_set: {} | |
script: | |
content: > | |
$("#file").change(getBase64); | |
$("#insert-doc").click(() => tryCatch(insertDoc)); | |
$("#getValue").click(() => tryCatch(getContentControlByName)); | |
$("#Insertcc").click(() => tryCatch(insertCC)); | |
$("#Trackall").click(() => tryCatch(trackChange)); | |
$("#Tracknone").click(() => tryCatch(trackNone)); | |
$("#GetCurrent").click(() => tryCatch(getAdded)); | |
$("#GetOriginal").click(() => tryCatch(getOrigin)); | |
$("#Save").click(() => tryCatch(save)); | |
$("#Close").click(() => tryCatch(close)); | |
let allTypeArray: Word.ContentControlType[] = | |
[Word.ContentControlType.richText, Word.ContentControlType.plainText]; | |
let trackCurrentArray: Word.ChangeTrackingState[] = | |
[Word.ChangeTrackingState.Added, Word.ChangeTrackingState.Normal]; | |
let trackOriginArray: Word.ChangeTrackingState[] = | |
[Word.ChangeTrackingState.Deleted, Word.ChangeTrackingState.Normal]; | |
async function close() { | |
await Word.run(async (context) => { | |
context.document.close(); | |
await context.sync(); | |
}); | |
} | |
async function save() { | |
await Word.run(async (context) => { | |
context.document.save(); | |
await context.sync(); | |
console.log("saved"); | |
}); | |
} | |
async function insertCC() { | |
await Word.run(async (context) => { | |
const ccTitle = $("#inputCCTitle") | |
.val() | |
.toString(); | |
let sel = context.document.getSelection(); | |
let cc = sel.insertContentControl(Word.ContentControlType.plainText); | |
cc.load(); | |
await context.sync(); | |
cc.title = ccTitle + ":"; | |
await context.sync(); | |
let range = cc.insertText(ccTitle, "Replace"); | |
let font = range.font; | |
font.bold = true; | |
font.size = 16; | |
await context.sync(); | |
}); | |
} | |
async function getAdded() { | |
await Word.run(async (context) => { | |
let ccs1 = context.document.getContentControls({ types: allTypeArray }); | |
let ccs = ccs1.getByChangeTrackingStates(["Added"]); | |
ccs.load(); | |
await context.sync(); | |
console.log("there are " + ccs.items.length + " content controls added"); | |
for (let i = 0; i < ccs.items.length; i++) { | |
console.log(i + 1 + ": " + ccs.items[i].title + ": " + ccs.items[i].text); | |
} | |
}); | |
} | |
async function getOrigin() { | |
await Word.run(async (context) => { | |
let ccs1 = context.document.getContentControls({ types: allTypeArray }); | |
let ccs = ccs1.getByChangeTrackingStates(["Deleted"]); | |
ccs.load(); | |
await context.sync(); | |
console.log("there are " + ccs.items.length + " content controls deleted"); | |
for (let i = 0; i < ccs.items.length; i++) { | |
console.log(i + 1 + ": " + ccs.items[i].title + ": " + ccs.items[i].text); | |
} | |
}); | |
} | |
async function getContentControlByName() { | |
await Word.run(async (context) => { | |
const ccTitle = $("#ccTitle") | |
.val() | |
.toString(); | |
let cc = context.document.contentControls.getByTitle(ccTitle).getFirst(); | |
cc.load(); | |
await context.sync(); | |
console.log(cc.title + cc.placeholderText); | |
}); | |
} | |
let externalWorkbook; | |
async function getBase64() { | |
// Retrieve the file and set up an HTML FileReader element. | |
const myFile = <HTMLInputElement>document.getElementById("file"); | |
const reader = new FileReader(); | |
reader.onload = (event) => { | |
const startIndex = reader.result.toString().indexOf("base64,"); | |
externalWorkbook = reader.result.toString().substr(startIndex + 7); | |
}; | |
// Read the file as a data URL so that we can parse the base64-encoded string. | |
reader.readAsDataURL(myFile.files[0]); | |
} | |
async function insertDoc() { | |
await Word.run(async (context) => { | |
let ret = context.document.insertFileFromBase64(externalWorkbook, "Replace", { | |
importTheme: true, | |
importStyles: true, | |
importParagraphSpacing: true, | |
importPageColor: true, | |
importTrackChangesMode: false | |
}); | |
await context.sync(); | |
}); | |
} | |
async function trackChange() { | |
await Word.run(async (context) => { | |
context.document.changeTrackingMode = "TrackAll"; | |
await context.sync(); | |
}); | |
} | |
async function trackNone() { | |
await Word.run(async (context) => { | |
context.document.changeTrackingMode = "Off"; | |
await context.sync(); | |
}); | |
} | |
/** Default helper for invoking an action and handling errors. */ | |
async function tryCatch(callback) { | |
try { | |
await callback(); | |
} catch (error) { | |
// Note: In a production add-in, you'd want to notify the user through your add-in's UI. | |
console.error(error); | |
} | |
} | |
language: typescript | |
template: | |
content: "<section class=\"ms-font-m\">\n\t<p>This demo shows how to manipulate the content controls, how to insert file from base64 and save the document.</p>\n\t<h3>ContentControl & Save & Close & InsertFileFromBase64 API list</h4>\n\t\t<ol>\n\t\t\t<li>Document.insertFileFromBase64</li>\n\t\t\t<li>Range.insertContentControl(\"plainText\")</li>\n\t\t\t<li>Document.changeTrackingMode</li>\n\t\t\t<li>Document.getContentControls</li>\n\t\t\t<li>ContentControlCollection.getByChangeTrackingStates</li>\n\t\t\t<li>Document.Save</li>\n\t\t\t<li>Document.Close</li>\n\t\t</ol>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<p>Select an document to insert into the current document.</p>\n\t<form>\n\t\t<input type=\"file\" id=\"file\"/>\n\t</form>\n\t\t<br>\n\t\t<p>Insert the document from the selected file.</p>\n\t\t<button id=\"insert-doc\" class=\"ms-Button\">\n\t\t\t<span class=\"ms-Button-label\">Insert document</span>\n\t\t</button>\n\n\t\t<p>Input the tag name of the content control</p>\n\t\t<form>\n\t\t\t<label>ContentControl title:</label>\n\t\t\t<input type=\"text\" id=\"ccTitle\" class=\".ms-input\"/>\n\t\t</form>\n\t\t\t<button id=\"getValue\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Get value</span>\n\t\t\t</button>\n\t\t\t<p>Track the change of the content control.</p>\n\t\t\t<button id=\"Trackall\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Track all</span>\n\t\t\t</button>\n\t\t\t<button id=\"Tracknone\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Track none</span>\n\t\t\t</button>\n\t\t\t<p>Insert the plain text content control to the cursor point.</p>\n\t\t\t<form>\n\t\t\t\t<label>ContentControl text:</label>\n\t\t\t\t<input type=\"text\" id=\"inputCCTitle\" class=\".ms-input\"/>\n\t\t\t</form>\n\t\t\t\t<button id=\"Insertcc\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Insert content control</span>\n\t\t\t\t</button>\n\t\t\t\t<p>Get the added content controls.</p>\n\t\t\t\t<button id=\"GetCurrent\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Get added content control</span>\n\t\t\t\t</button>\n\t\t\t\t<p>Get the deleted content controls.</p>\n\t\t\t\t<button id=\"GetOriginal\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Get deleted content control</span>\n\t\t\t\t</button>\n\t\t\t\t<p>Save the document.</p>\n\t\t\t\t<button id=\"Save\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Save.</span>\n\t\t\t\t</button>\n\t\t\t\t<p>Close the document.</p>\n\t\t\t\t<button id=\"Close\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Close.</span>\n\t\t\t\t\t\t\t\t</button>\n</section>" | |
language: html | |
style: | |
content: |- | |
section.samples { | |
margin-top: 20px; | |
} | |
section.samples .ms-Button, section.setup .ms-Button { | |
display: block; | |
margin-bottom: 5px; | |
margin-left: 20px; | |
min-width: 80px; | |
} | |
.ms-input { | |
margin-bottom: 5px; | |
margin-left: 20px; | |
min-width: 80px; | |
} | |
language: css | |
libraries: | | |
https://appsforoffice.microsoft.com/lib/beta/hosted/office.js | |
@types/office-js | |
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css | |
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css | |
core-js@2.4.1/client/core.min.js | |
@types/core-js | |
jquery@3.1.1 | |
@types/jquery@3.3.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment