How to Programmatically Insert Text in a JS DOCX Editor

Technical Support WebViewer
, ,
1

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.

1 Like
2

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.

1 Like
3

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?

1 Like
4

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:

  • What is the workflow that you would use the requested feature in?
  • Why is the feature valuable to you and your users?
  • How are you coping without it right now?

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like