1. Home
  2. Forum
  3. React - EJ 2
  4. Selecting an image in a bookmark

Selecting an image in a bookmark

Hi team,

I'm working on inserting images in the documentEditor, for my use, each time, a user inserts an image, I save its position by creating a bookmark on the image selection with the steps below
  • insert image (editor.insertImage(...))
  • select image (selection.extendBackward())
  • create the bookmark (editor.insertBookmark(...))
  • position the carret to its previous position (selection.moveNextCharacter()) 

By doing this, my user now can retrieve his image in the document easily using the method selectBookmark(...)

It works, pretty well but by doing this, it creates something weird about the image selection : 
when I want to select the image on the document by clicking on it, only the half part of the image permits the selection of it, the left part, if I click on the right part of the image, I can't select it.
It seems linked to the bookmark because, without it, I can select the image correctly on its right side.

Bonus question: By selecting all the document and querying bookmarks by the property selection.bookmarks, I get an array of my bookmarks ordered by creation, 
how can I get these elements oredered by their position in the document?


7 Replies
HC Harini Chellappa Syncfusion Team April 23, 2020 01:14 PM UTC

Hi François, 

Thank you for contacting Syncfusion Support. 

Reg. right side image is not selected when bookmark is inserted. 

Currently, we are checking on this, we will update further details on this by April 27, 2020. 
 
Reg. how can I get these elements oredered by their position in the document? 

Currently, we don’t have any API to get the bookmark elements based on position. You can check with DocIO to get the elements based on DOM. 

Please refer the below DocIO documentation on bookmarks. 


DocIO returns bookmark collection based on DOM 

Sample Server-side Code snippet using DocIO 


        [HttpPost]           
        public string GetBookmarks() 
        { 
//file data sent from document editor. 
            System.Web.HttpPostedFile data = System.Web.HttpContext.Current.Request.Files[0]; 
            //Opens document stream             
            Syncfusion.DocIO.DLS.WordDocument wordDocument = new Syncfusion.DocIO.DLS.WordDocument(data.InputStream); 
            int count = wordDocument.Bookmarks.Count; 
            string[] bookmark = new string[count]; 
            for(int i =0; i< count; i++) 
            { 
                bookmark[i] = wordDocument.Bookmarks[i].Name; 
            } 
            return Newtonsoft.Json.JsonConvert.SerializeObject(bookmark); 
} 

Client-side code to call server in document editor. 

container.documentEditor.saveAsBlob("Docx").then((document) => { 
        var formData = new FormData(); 
        formData.append('fileName', 'sample.docx'); 
        formData.append('data', document); 
        var req = new XMLHttpRequest(); 
        req.open("POST", "/DocumentEditorService/GetBookmarks", true); 
        req.onreadystatechange = function () { 
            if (req.readyState === 4) { 
                if (req.status === 200 || req.status === 304) { 
                    console.log(JSON.parse(req.responseText));//return bookmarks collection 
                } 
            } 
        };         
        req.send(formData); 
    }); 


Kindly check it and let us know whether this suits your need. 

Regards, 

Harini C 


FR François April 24, 2020 09:32 AM UTC

Hi Harini,

thanks for this answer, the bug is easy to reproduce, simply create bookmark in a selection containing an image.

About the server side, I'm really bad with visual studio and .NET code, so it's frustrating for me, no time for upgrading my skills on it so I only work with the client side API. (plus,  my team and I are working on a Symfony project in PHP7 + React client-side).

For now, I don't know how I could simply add the server side API to my project.

Anyway, if wordDocument.Bookmarks returns a list based on DOM yes it would be a nice solution...

Regards,
François


SM Suriya Murugan Syncfusion Team April 27, 2020 12:23 PM UTC

Hi Francois, 
 
Reg. right side image is not selected when bookmark is inserted. 
 
We have logged the defect report for the reported issue. We will fix this issue and include in our upcoming EJ2 patch release which is tentatively scheduled on May 20,2020. 
 
You can tract the status of bug through below feedback link: 
 

Reg. Server side 
 
We dont have backend support in PHP. We need  server side interaction for document importing, paste, restrict editing and spell check action. We can write the server side library either in ASP.NET MVC or Core. 
You can written using any of the below nuget based on your platform requirement.  
  
Platform  
Nuget  
ASP.NET Core  
ASP.NET MVC  
  
 You can use below ASP.NET Core service sample: 
 
Regards, 
Suriya M. 


HC Harini Chellappa Syncfusion Team May 20, 2020 12:03 PM UTC

Hi Francois, 

We're sorry to not make it possible to include the fix for the below promised issue in latest EJ2 patch release v18.1.53. will include this in our upcoming EJ2 patch release which is tentatively scheduled on June 3, 2020. We will update the status of the feedback link, once it is taken for implementation. You can track the status from below link. 


Regards, 

Harini C 


HC Harini Chellappa Syncfusion Team June 3, 2020 04:09 PM UTC

Hi Francois, 

We have resolved the reported issue, but due to some technical problem, the fix is not included in the latest weekly NuGet release. So, we have shared the custom document editor package for the same. Kindy download it from the below link. 


Note: We will include the fix in our upcoming weekly NuGet release, which is tentatively scheduled on June 10th,2020. 


Regards, 

Harini C 


FR François June 15, 2020 03:19 PM UTC

You guys, are awesome!

Sorry for being late, it works perfectly now. Thanks you very much :)

AE Ajithamarlin Edward Syncfusion Team June 16, 2020 01:29 PM UTC

Hi Francois, 
  
  
Thanks for your update. 
  
We glad to know that the reported issue had resolved. Let us know if you need any further assistance on this. 
  
  
Regards, 
Ajithamarlin E 


Loader.
Up arrow icon