insert html from outside editor inserts always at end

[rekna1]

I have along side the editor a list of items (that are the result of some search). I want to be able to insert the text of an item into the editor by selecting one of them. However when I execute html.insert the text is always inserted at the end and not at the cursor.

I've noticed that when I insert text with a custom button this does not happen (probably because the editor component does not loose focus).

[4kochi]

I have the same problem in Safari (v13.1). But it works in Chrome and Firefox (all browsers in Mac).

So the button which is clicked is outside of the editor. And the focus is lost when you select some items from the other UI. But as said in Chrome and Firefox the cursor position is somehow cached and the content is added at the correct cursor position. In Safari it is always added at the end off the editor content.

[rekna1]

I've managed to make it work in chrome by moving the items to a popup and by calling this.editor.selection.save(); before I show the popup. Then when I click on an item to insert I first call this.editor.selection.restore();

[4kochi]

That worked, thx a lot

[4kochi]

Ok, still have the problem. Here is the workflow (Safari browser)

1. Click in the froala editor somewhere, to set the cursor
2. Make UI component visible for selection html for insert into editor (with this click editor.selection.save() is called
3. Select an item from UI and click insert button (editor.selection.restore() is called, followed by editor.html.insert('my html') The html is inserted in the correct cursor position. Also when clicking the insert button multiple times, the html is added correctly
4. Select another item from the UI and click insert button. The same logic is applied as before, but now the html is inserted at the end of the editor.

[4kochi]

As a workaround i now also listen to the build in click event of the editor and store the selection there as well (editor.selection.save()).

[RamGupta07]

'blur': () => { this.editorInstance.selection.save(); } First set blur event and then wherever you wanna use use it like below : this.editorInstance.selection.restore(); this.editorInstance.html.insert("{" + val.field + "}");