How do I allow the user to edit all text except the phrase in it?

[Yuliia]

Hello, I use DocumentEditorComponent. I want to allow the user to edit all text except the phrase in it.

Sample text: He was born in the USA.

And I don't want the user to edit the country name.

So, "He was born in" should be editable. But how to mark the text "USA" so that it is not edited?

Thanks

[Kurthis Banu Abdul Majeeth]

Hi Yuliia, 

You can achieve your requirement using Restrict editing. It provides option to restrict certain region based on the user. If the current user is not the one who have rights to certain regions, then editing will not be allowed. Editing will only be allowed on the user restricted region. 

// To select current paragraph  

container.documentEditor.selection.selectParagraph();  

  

//When the document is protected allows the provided user to edit the selected content. If user is not provided, “Everyone” is allowed to edit.  

  

container.documentEditor.editor.insertEditingRegion(“username”);  

  

// Enforce document protection have to specify password, whether to limit formatting or not, whether isReadOnly or not  

container.documentEditor.editor.enforceProtection('123',false,true);  

  

//stop the document protection  

container.documentEditor.editor.stopProtection('123');  

  

  

To navigate within edit region make use of below API  

 

container.documentEditor.selection.navigateToPreviousEditingRegion();  

 

container.documentEditor.selection.showAllEditingRegion() ; 

 

Kindly refer the below demo sample also: 

https://ej2.syncfusion.com/react/demos/#/material/document-editor/document-protection 

Documentation Link: 

https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/#inserteditingregion-1 

https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/ 

Please let us know if you have any questions.  

Regards, 

Kurthis Banu A. 

[Daniel Friedebold]

Hello,

We are facing a similar challenge.

We have a table in which our aim is to allow edit in only one cell - all other cells should be non-editable.

Is there a way to accomplish this using the same method mentioned above?

Thank you in advance.

Best regards

Daniel Friedebold
Legalhero GmbH

[Suresh Iyappan]

Hi Yuliia, 

 

You can use the  selection API’s to navigate between rows and cells. Refer to the below documentation on navigating between cells and rows in the table: https://ej2.syncfusion.com/react/documentation/document-editor/how-to/insert-text-or-image-in-table-programmatically

 

function moveCursorToNextCell() {

        // To get current selection start offset

        var startOffset = container.current.documentEditor.selection.startOffset;

        // Increasing cell index to consider next cell

        var startOffsetArray = startOffset.split(';');

        startOffsetArray[3] = parseInt(startOffsetArray[3]) + 1;

        // Changing start offset

        startOffset = startOffsetArray.join(';');

        // Navigating selection using select method

        container.current.documentEditor.selection.select(startOffset, startOffset);

      }

      

      function moveCursorToNextRow() {

        // To get current selection start offset

        var startOffset = container.current.documentEditor.selection.startOffset;

        // Increasing row index to consider next row

        var startOffsetArray = startOffset.split(';');

        startOffsetArray[2] = parseInt(startOffsetArray[2]) + 1;

        // Going back to first cell

        startOffsetArray[3] = 0;

        // Changing start offset

        startOffset = startOffsetArray.join(';');

        // Navigating selection using select method

        container.current.documentEditor.selection.select(startOffset, startOffset);

      }

 

To select the particular cell you can use the selectCell() API. Please refer to the API documentation provided below: https://ej2.syncfusion.com/react/documentation/api/document-editor/selection/#selectcell

Below provided is the sample code snippet on selecting the particular cell and inserting edit region
 

container.documentEditor.editor.insertTable(2, 2);

// To move the cursor to next cell (i.e) First row second cell

moveCursorToNextCell();
// selects the second cell of the first row

container.documentEditor.selection.selectCell();

//When the document is protected allows the provided user to edit the selected content. If user is not provided, “Everyone” is allowed to edit.  

container.documentEditor.editor.insertEditingRegion(“username”);  

// Enforce document protection have to specify password, whether to limit formatting or not, whether isReadOnly or not  

container.documentEditor.editor.enforceProtection('123',false,true);  

Regards,
Suresh I