Selection API not selecting specified indices

Hi! I'm trying out the DocumentEditor control. I'm trying to select texts using the Selection API and add background color to that selected text. Here's the block of code that I'm using:
     $("#test-save").click(function(){

documenteditor.documentEditor.editor.selection.select("0", "5");

documenteditor.documentEditor.editor.toggleHighlightColor("BrightGreen");

console.log("clicked", documenteditor.documentEditor.editor.selection);

});       


   

But it just goes to the 0 index of the editor, is there anything that I did wrong?


Based on the Selection API docs: 

select

Selects content based on start and end hierarchical index.

ParameterTypeDescription
startstringstart hierarchical index.
endstringend hierarchical index.

Returns void


The parameters I used are in string format and i have enableSelection: true as well.


5 Replies 1 reply marked as answer

SM Suriya Murugan Syncfusion Team May 27, 2021 09:40 AM UTC

Hi Charlemagne 

Synfusion Greetings! 

hierarchical index will be in below format.  
 
sectionIndex;blockIndex;offset  
if block is a paragraph, then the hierarchical index will be like below.  
 
SectionIndex;ParagraphIndex;offset  
If the block is a table, then the hierarchical index will be like below.  
 
SectionIndex;TableIndex;RowIndex;CellIndex;BlockIndex;offset  
 
Sample code snippet  
documentEdContainerIns.documentEditor.editor.insertText("Welcome")  
documentEdContainerIns.documentEditor.selection.select("0;0;0", "0;0;2")  
The above code will select the letters “We” from inserted text “Welcome”. 

Please let us know if you have any questions. 


Regards,  
Suriya M.  




CR Charlemagne Reyes May 27, 2021 10:07 AM UTC

Hi Suriya,

I've tried the sample code snippet, however it still not working as expected. It still goes to the 0 index. I've chatted with one support after posting this and he/she gave me a stackblitz link. 

Here's the full block of code I'm working on:

          documenteditor = new ej.documenteditor.DocumentEditorContainer({ 

isReadOnly: false,  

enableToolbar: true,

acceptTab: true,

enableAllModules: true,

enableWordExport: true,

enableEditor: true,

enableTrackChanges: true,

enableSelection: true,

serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'

});

        documenteditor.pageOutline = '#E0E0E0';

        //Documenteditor control rendering starts

document.getElementById("docedit-syncfu").addEventListener("dragover", function (event) {

        event.preventDefault();

    });

documenteditor.created = function() {

console.log("created");

console.log("syncfu", document.getElementById("docedit-syncfu"));

document.getElementById("docedit-syncfu").addEventListener("drop", function (e) {

console.log("dropped");

        var text = e.dataTransfer.getData('Text').replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, '');


console.log("e", e.offsetX);

console.log("docedit", documenteditor.documentEditor.editor);

documenteditor.documentEditor.editor.insertText("123");

    });

};


documenteditor.appendTo('#docedit-syncfus');

documenteditor.contentChange = function(e) {

console.log(e);

};


$("#test-save").click(function(e){

console.log("clicked", documenteditor.documentEditor);

documenteditor.documentEditor.editor.insertText("Welcome");

documenteditor.documentEditor.selection.select("0;0;1", "0;0;5");

});


If I replace the  documenteditor.documentEditor.selection.select("0;0;1""0;0;5"); with the .selectAll(), it works beautifully but I only need to select a set of characters.


SM Suriya Murugan Syncfusion Team May 28, 2021 03:37 AM UTC

Hi Charlemagne, 

We have tried provided code snippet. Please check it from below link: 


On select button click, will insert and select set of character. 

Please check below screenshot: 
 

It is working properly. Please let us know if you have any questions. 


Regards, 
Suriya M. 


Marked as answer

CR Charlemagne Reyes May 28, 2021 06:09 AM UTC

Hi Suriya! It's working now. All your provided codes were helpful but I just forgot to import the "ej2.min.js" not quite sure how everything else worked fine without this. But the params for the .select() is a major help! Thank you so much!!!


SM Suriya Murugan Syncfusion Team May 28, 2021 06:18 AM UTC

Hi Charlemagne, 

Thanks for your update. 

Regards, 
Suriya M. 


Loader.
Up arrow icon