Section:

Getting text from text select events

When users select text from a loaded document, this triggers an event that can be used to get the selected text. This is helpful in automatically creating annotations where the selected text is or perhaps extracting the text for creating free text annotations.

Getting selected text from events

The main event of interest triggered by DocumentViewer when text is selected is the textSelected event.

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { documentViewer } = instance.Core;
3
4  documentViewer.addEventListener('textSelected', (quads, selectedText, pageNumber) => {
5    // quads will be an array of 'Quad' objects
6    // text is the selected text as a string
7    if (selectedText.length > 0) {
8      console.log(selectedText);
9    }
10  });
11});

Related Links

The textSelected event gets fired whenever the selected text on the document changes. It is worth considering using debouncing if you are only looking to handle this event once the selection has stopped.

Also the textSelected event fires once for each page with selected text. So if text is selected on page A and B, and the selected text on page A changed, the textSelected event will fire once for each page even though there weren't any changes for page B.

Getting selection from the TextSelect tool

You can also listen for the selectionComplete event on the TextSelect tool. This event does not return the selected text but we can still get the text from the DocumentViewer via getSelectedText.

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { documentViewer, Tools } = instance.Core;
3
4  const tool = documentViewer.getTool(Tools.ToolNames.TEXT_SELECT);
5  tool.addEventListener('selectionComplete', (startQuad, allQuads) => {
6    let selectedText = '';
7    Object.keys(allQuads).forEach(pageNum => {
8      const text = documentViewer.getSelectedText(pageNum);
9      selectedText += text;
10    });
11    // the startQuad and allQuads will have the X and Y values you want
12  });
13});

Related Links

Getting selected text from browser events

Get selected text by listening for a keydown or clipboard copy event.

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { documentViewer } = instance.Core;
3  const showSelectedText = () => {
4    const page = documentViewer.getCurrentPage();
5    const text = documentViewer.getSelectedText(page);
6
7    if (!!text) {
8        console.log(text);
9    }
10  }
11
12  // Optionally use keyDown events
13  documentViewer.addEventListener('keyDown', function (e) {
14    if (e.keyCode == 67 && (e.ctrlKey || e.metaKey)) {
15      showSelectedText();
16      console.log('Ctrl+C pressed');
17    }
18  });
19
20  // Otherwise use the copy event
21  const iframeWindow = instance.UI.iframeWindow;
22  iframeWindow.addEventListener('copy', function (e) {
23      showSelectedText();
24      console.log('Ctrl+C (copy) pressed');
25  });
26});

Related Links

Next steps

You can read up more on text extractions in our other text extraction guides!

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales