Programatically add an image in a specific position of a sfdt document

[Antonio]

Hi,
I have a document with a specific bookmark ("REFERTO_FIRMA") and I want to programatically add an image there.

I've tried this:

 onImageLoad(event) {

    const src = event.currentTarget.src;

    setTimeout(() => {

      this.documentEditorComponent.documentEditor.selection.navigateBookmark("REFERTO_FIRMA");

      this.documentEditorComponent.documentEditor.editor.insertImage(src, 300, 100);

      this.pasteText("Prova");

    }, 1000);

  }

I've attached the sftd

but image isn't loaded at all (while the text is added as expected).

Trying to debug this, I changed the navigateBookmark call with navigateToNextEditingRegion and, in this case, the image shows up (so it's not a problem with the image itself).

May anyone help me?

Attachment: fallbackModel_fb871fcc.zip

[Harini Chellappa]

Hi Antonio, 

 

Since document is in protected state, navigating to bookmark doesn’t enable the editing state of document editor. Hence editing operations like insertImage is restricted on read-only mode.  

Note: For insertText API, we have not considered the read-only mode. we will consider it. 

You can use navigateToNextEditingRegion API to navigate to the editable region and check whether current selection is in required bookmark. If so, you can insert the image. Please check the below sample code snippet. 

Sample code snippet 

container.documentEditor.selection.navigateToNextEditingRegion(); 

    if(container.documentEditor.selection.bookmarks.length == 1 && container.documentEditor.selection.bookmarks[0]== "REFERTO_TITOLO"){ 

var img = new Image();   

img.addEventListener('load', (event)=> {   

  container.documentEditor.editor.insertImage('data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==', 300, 100); 

}, false);  

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; 

    } 

 

Regards, 

Harini C