I’ve been experimenting with the JavaScript DOCX Editor and successfully got it working—I can manually type and edit text within the document.
Now, I’d like to add a custom button outside the editor that, when clicked, inserts text at the current caret position or replaces the selected text if any is highlighted.
How can I achieve this? I couldn’t find any examples or documentation covering this functionality.
Hello @jonk,
If you would like to programatically insert text, we recommend using the pasteText() API. You can find the API doc here: https://sdk.apryse.com/api/web/Core.Document.OfficeEditor.html#pasteText__anchor
The API works by pasting the content from the clipboard into the editor at the current caret position (replacing any selected text). You can use your custom button to write the desired text to the clipboard and call the pasteText() API.
Let us know if this works for you!
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Hi Jacob,
Yes that worked well thanks.
In my case I’m using Vue.js so got a handle to the OfficeEditor after the document has loaded.
const viewer = ref(null); // From view: <div id="webviewer" ref="viewer"></div>
const instanceRef = ref(null);
const officeEditor = ref(null);
WebViewer({
...
enableOfficeEditing: true,
...
}, viewer.value).then(
(instance) => {
instanceRef.value = instance;
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
const document = documentViewer.getDocument();
officeEditor.value = document.getOfficeEditor();
});
}
);
And then have a click handler that uses the OfficeEditor ref to paste in the coped text.
const placeholderText = 'Hello World';
const pasteWithFormatting = false;
// First copy the placeholder text to the clipboard
navigator.clipboard.writeText(placeholderText)
.then(() => {
// Then use the paste method from the Office Editor
officeEditor.value.pasteText(pasteWithFormatting);
console.log('Placeholder text added via clipboard paste');
})
.catch((err) => {
console.warn('Clipboard access failed', err);
});
The browser copy and paste allowed prompt is displayed for the page which must be accepted for this to work.
Do you know if there is future support for adding text / programmatically controlling the editor directly i.e. not using this copy and paste approach?
Hello @jonk,
Glad to hear you were able to make the solution work for your project!
We currently do not have this feature on our backlog, but I can raise this feature request for our Product team to review for feasibility and viability.
If you could provide some further information around the context of why you want the feature, this may help prioritize its development. We would be interested to know:
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
HI @jromanocarlsen ,
I found this thread while trying to implement this exact feature.
Do you know if any development has been made on this to support directly adding text programmatically into the editor and not using the copy and paste approach.
To the questions you asked back in February:
What is the workflow that you would use the requested feature in?
I need the ability to add text to a DOCX file programmatically, without depending upon the user consenting to accessing the browser’s clipboard
Why is the feature valuable to you and your users?
using the browser’s clipboard is fragile, and requires user consent, which they aren’t expecting
How are you coping without it right now?
This is new feature development for me, but requiring our users to understand and provide consent is burdensome, and the users we have shown our feature to thus far do not understand the browser consent when it appears. To note, our users are coming from a WYSIWYG editor where they can insert “merge tags” without having to provide browser clipboard consent. We are trying to provide a near-identical experience to a WYSIWYG editor with {merge tags} so that they can design their own document templates for the server-side document generation from template feature.
Thank you,
-Brian
Hello @bpieslak,
Thank you for reaching out.
Since this forum post was first opened, we have now introduced programmatic changes within DOCX Editor via our Search and Replace functionality. For information on this feature and code examples, please see our forum post here: https://docs.apryse.com/web/guides/search-replace
Inserting/replacing text in this manner will require search results returned from a search query. If this does not fit your desired workflow, feel free to provide an exact step-by-step of the desired workflow and I can forward it to our Product team on the existing feature request.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Thank you @jromanocarlsen
Apologies for my delayed reply.
For the “Search and Replace” feature, is the same available in the server-side SDK? or is this only available inside of the WebViewer?
Additionally, for “Search and Replace” is it only possible to search & replace text? or would this include formatted text or other elements like bulleted lists or tables?
The desired workflow is that I could create a document with a “merge tag” that represents another document (or document fragment) say [[header]] for example.
Then when my code reads the template, whenever [[header]] is detected, my code retrieves the document in my library tagged as “header” and replaces the [[header]] placeholder text with the contents of the “header” document.
Please let me know that makes sense or if you need further explanation of the idea / feature request.
Thank you,
-Brian
Hello @bpieslak,
Search and replace does exist for our Server SDK, however this feature only applies within PDF files. You can find the related guide here: https://docs.apryse.com/core/guides/features/search/replace
As for “is it only possible to search & replace text” within our DOCX editor, yes currently our APIs are limited to passing in Strings to replace the search result.
Based on the desired workflow, have you considered our Template Generation feature? It functions very similarly to the “merge tag” described, replacing tags in a DOCX file which look like “{{placeholders}}” with values passed in via JSON. If this sounds like it fits your desired workflow, feel free to check out the guide for this here: https://docs.apryse.com/web/guides/create/generate-docx-template.
If this does not fit your workflow, we can move forward with a feature request for our DOCX editor. Let us know how you would like to proceed.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.
Hi @jromanocarlsen ,
sorry that was my mistake. I was getting my forum topics mixed up.
I use Template Generation already, but my questions there are in a different thread.
-Brian
Hello @bpieslak ,
Thank you for the clarification.
To clarify, are there any other questions you have regarding our Search and Replace feature or our DOCX Editor as a whole (that may have been mixed up with the other thread)?
If so, feel free to reach out and we can investigate further.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.