Insert text at cursor position and formatting it with some specific style
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 :)
SIGN IN To post a reply.
1 Reply
SIGN IN To post a reply.
