Insert text at cursor position and formatting it with some specific style

[Unknown]

Hi!

I'm trying to implement a sort of  "variables" logic inside document editor component.

I've created a custom toolbar buttom that fires an event on selection:

It shows a list of elements that I want to manage like variables.

Clicking on a variable will insert something like this:

Using this code:

private onVariableSelected(args) {
    console.log('on variable selected: ', args, args.item.text);

    this.documentEditorContainer.documentEditor.editor.insertText(`<${args.item.text}>`);
    this.documentEditorContainer.documentEditor.editor.applyStyle('Heading 6');
}

The function adds angle brackets to variable name to recognize it from normal text.

I will parse the serialized document in a second moment switching variables with dynamic values.

The question is: there is a way to tell editor that every word "tagged" with angle brackes have to be formatted in a particular way (maybe red or underlined)?

As you can see, I've tried to use applyStyle method, but it will affect the whole paragraph.

It will be ok also to find a way to select the word inserted from variable selection and then formatting it with a particular style.

Also, it will be useful to listen to "contentChange" event of document editor and parse the text searching for variables:

If a user will delete manually an angle bracket, that text will not be a variable.

If something is not clear don't hesitate to ask for futher informations.

Thanks in advance,

Tommaso.

PS: If have a better solution to implement a "variable" like logic, then explain it to me :)

[Stephen Raj Chandra Sekar]

Hi Tommaso, 

 

Reg. I've tried to use applyStyle method, but it will affect the whole paragraph. 

applyStyle API applies heading styles for whole paragraph only. You can use characterFormat  properties in selection Module to change selected text character format. We have prepared a sample for inserting text with character format “bold”,  by custom toolbar button. Kindly view the sample from below link. 

 

https://stackblitz.com/edit/angular-ezcodz-92w787?file=app.component.ts 

 

Documentation for character format: https://ej2.syncfusion.com/angular/documentation/api/document-editor/characterFormatProperties/#characterformatproperties 

  

You can select the text programmatically by select API in selection Module. Kindly refer below documentation. 

https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#select-1 

 

Reg. it will be useful to listen to "contentChange" event of document editor and parse the text searching for variables 

Can you please explain briefly the use case scenario for your requirement? Also refer below API for finding all occurrences of a specific text & get results. We hope this is related to your requirement. 

 

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

 

Regards, 

Stephen Raj