How text can be appended in the current pointer position?

[techartdev]

Hello,
I'm trying to build simple tags modal. All's fine there, I've created the modal, populated it with the tags ([FirstName], [LastName] etc.) but I want to attach .click() event to each tag so when someone clicks on it the tag will be appended to the current pointer position. I've tried to add it as a button in the RTE menu but then I realized they work only with commands. Creating a custom block isn't option too because I can't move it inside text section. So what should be the way of doing that? Simply appending text at the selected position in the text element.

[artf]

Sorry, not sure if I totally get what do you want to build, for tags, you mean replaceable variables (inside text components)? In that case, I'd simply do what you already suggested, appending text at the selected position

[techartdev]

Well, the tags are replaced in a service... that's not the case. But I want to place that tag inside the editor text block at my current selection. Simply I have modal window with all tags, when I click on a tag must be appended to the text I'm editing at the moment - on the current cursor position. Will attach snipping, hope it will help you understand what I'm talking about.

[artf]

The editable component is inside the canvas (which is inside the iframe) so you have to access its document before executing commands

var canvasDoc = editor.Canvas.getBody().ownerDocument;
// Insert text at the current pointer position
canvasDoc.execCommand("insertText", false, 'TEST');

[edwardjiawei]

How to persist the data after reload, after execCommand insert?

[AksharaKRK]

Hi @artf, Am trying to insert a text cum link (from custom dropdwon in styleManager) and am using this code

	let fileLink = editor.setComponents(`<a href='${url}'> ${name} </a>`);
	const canvasDoc = editor.Canvas.getBody().ownerDocument;
	// Insert text at the current pointer position
	canvasDoc.execCommand("insertText", false, fileLink);

Its adding the content in bottom of the editor instead of adding next to cursor pointer. Will you please help me out of this.

[AksharaKRK]

let fileLink = editor.addComponents(`<a href='${url}'> ${name} </a>`);
const canvasDoc = editor.Canvas.getBody().ownerDocument;
// Insert text at the current pointer position
canvasDoc.execCommand("insertHTML", false, fileLink);

Help me out of this @artf