# Customize freetext tool to change text and behavior programatically

**URL:** <https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94>\
**Category:** Technical Support\
**Created:** [June 26, 2020, 7:35am UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94 "2020-06-26T07:35:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rabiraj](https://avatars.discourse-cdn.com/v4/letter/r/c37758/32.png) [@rabiraj](https://pdfjs.community/u/rabiraj)\
**Post date:** [June 26, 2020, 7:35am UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/1 "2020-06-26T07:35:21Z")

</div>

How can I customize freetext tool for following:

A) change initial text (possibly from custom drop-down selection)  
B) It automatically goes to edit more, how can I programatically come out of edit more since I will be changing the text programatically  
C) Upon coming out of edit mode, it shows context menu. I do not want to show context menu after the text is edited. Only when user clicks on this annotation, I want to show the context menu, like in all other annotations.

I tried following to change initial text, but it did not work

```
  var Tools = this.wvInstance.Tools;
  var Annotations = this.wvInstance.Annotations
  var freeTextMouseUp = Tools.FreeTextCreateTool.prototype.mouseLeftUp;
  Tools.FreeTextCreateTool.initialText = 'REDACTED'
  Tools.FreeTextCreateTool.prototype.mouseLeftUp = function() {
    if (this.annotation) {
      this.text = 'REDACTED'
      instance.docViewer.getAnnotationManager().redrawAnnotation(this.annotation);
    }
    freeTextMouseUp.apply(this, arguments);
  }
```

---

<div class="post-metadata">

**Author:** ![zzhang](https://avatars.discourse-cdn.com/v4/letter/z/b9e5f3/32.png) [@zzhang](https://pdfjs.community/u/zzhang)\
**Post date:** [June 26, 2020, 8:23pm UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/2 "2020-06-26T20:23:51Z")

</div>

Hi,

A)  
The initialText function actually lives on the prototype instead of the function itself, so I believe you should do

```javascript
Tools.FreeTextCreateTool.prototype.initialText = 'REDACTED'

```

B)  
You can listen to the [editorFocus](https://pdfjs.express/api/CoreControls.EditBoxManager.html#event:editorFocused__anchor) event of [editboxManager](https://pdfjs.express/api/CoreControls.AnnotationManager.html#getEditBoxManager__anchor) and in the event callback you can grab the editor element inside the page container and then call the blur method of it. The id of an editor element looks like `freetext-editor-${annotation.Id}`.

C)  
You can listen to the editorBlur event and then use this.wvInstance.annotManager to deselect all the annotaitons.

Thanks,  
Zhijie

---

<div class="post-metadata">

**Author:** ![rabiraj](https://avatars.discourse-cdn.com/v4/letter/r/c37758/32.png) [@rabiraj](https://pdfjs.community/u/rabiraj)\
**Post date:** [June 27, 2020, 2:19pm UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/3 "2020-06-27T14:19:26Z")

</div>

Both the code as suggested did not help. Pls see the code below. The event is not getting called back. Pls suggest.

var Tools = this.wvInstance.Tools  
Tools.FreeTextCreateTool.prototype.initialText = ‘REDACTED’

this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().editorFocused = (editor, annotation) =\> {  
console.log(editor)  
editor.blur()  
}

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [June 29, 2020, 4:45pm UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/4 "2020-06-29T16:45:42Z")

</div>

Hi,

editorFocused is an event so you need to bind to it with the ‘on’ function.

```javascript
this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().on('editorFocused', (editor, annotation) => {
   console.log(editor)
   editor.blur()
})

```

---

<div class="post-metadata">

**Author:** ![rabiraj](https://avatars.discourse-cdn.com/v4/letter/r/c37758/32.png) [@rabiraj](https://pdfjs.community/u/rabiraj)\
**Post date:** [June 30, 2020, 12:34am UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/5 "2020-06-30T00:34:46Z")

</div>

That did not work as well. The event is not getting triggered even with  
this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().on(‘editorFocused’, (editor, annotation) =\>

Also, following has not changed initial text  
Tools.FreeTextCreateTool.prototype.initialText = ‘REDACTED’

---

<div class="post-metadata">

**Author:** ![rabiraj](https://avatars.discourse-cdn.com/v4/letter/r/c37758/32.png) [@rabiraj](https://pdfjs.community/u/rabiraj)\
**Post date:** [July 1, 2020, 6:15am UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/6 "2020-07-01T06:15:10Z")

</div>

I am able to get the event with **editorFocus** instead of **editorFocused** as following

this.wvInstance.docViewer.getAnnotationManager().getEditBoxManager().on(‘editorFocus’, (editor, annotation) =\> {  
console.log(‘editorFocus’)  
editor.editor.container.blur()  
}

However, blur is not working. Basically, I do not want user to have access to rich text popup.

Also, how can I change the text programmatically?

Following is not working as well  
Tools.FreeTextCreateTool.prototype.initialText = ‘REDACTED’

Pls suggest.

---

<div class="post-metadata">

**Author:** ![zzhang](https://avatars.discourse-cdn.com/v4/letter/z/b9e5f3/32.png) [@zzhang](https://pdfjs.community/u/zzhang)\
**Post date:** [July 2, 2020, 5:57pm UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/7 "2020-07-02T17:57:48Z")

</div>

Hi,

After more investigation I was actually able to find an API that disables freetext editing, and is probably what you want. Regarding `initialText`, it seems that the viewer is overwriting the value, so we need to wait for some time before calling it. Here’s the code you can try.

```javascript
Webviewer(
  {
    initialDoc: hashFile,
    path: '/lib',
  },
  document.getElementById('viewer')
).then(function(instance) {
  instance.annotManager.disableFreeTextEditing();
  instance.docViewer.on('documentLoaded', () => {
    instance.Tools.FreeTextCreateTool.setTextHandler(() => 'REDACTED');
  })
});

```

I’ve verified that this solution works on my end, so will lock this post. If it doesn’t work on your end please open a new topic. Thanks.

---

<div class="post-metadata">

**Author:** ![zzhang](https://avatars.discourse-cdn.com/v4/letter/z/b9e5f3/32.png) [@zzhang](https://pdfjs.community/u/zzhang)\
**Post date:** [July 2, 2020, 6:03pm UTC](https://pdfjs.community/t/customize-freetext-tool-to-change-text-and-behavior-programatically/94/8 "2020-07-02T18:03:30Z")

</div>