I'm new in VueJS and I'm developing a sort of tagging editor. It is supposed to be pretty basic.
The idea is that I have a list of tags and some document text. The goal is replacing the selected text with a button (the tag) which, on click, shows the infos of that tag.
Until now I've been able to replace the selected text with a button through a method using window.getSelection() and reassigning its innerHTML.
I have two issues using this solution:
1) I'm able to replace innerHTML only with raw HTML, so it's not working for Element-UI components, which I would like to use.
2) Moreover, if I replace the innerHTML with a button it works fine. The issue is that I'm not able to link any function to the button. So if I replace my selected innerHTML with var newHTML = "<button @click="someFunction">"+text+"</button>", the function is not triggered on click.
I hope I've been clear enough explaining my issues.
I think you're going to find that replicating this functionality in Vue (or similar) is going to take a bit more work.
Just quickly thinking about it... You would need to render your text block as a series (array of objects, likely) of elements using list rendering (or in the render function). Each element would either be plain text or a tag button and rendered accordingly. When using Window.getSelection(), you will need to determine which (if any) of your text elements should handle the selection. That node would then need to be split into three (text before, button, text after) and updated in your array. Vue will then take care of rendering those elements out for you.
Another possibility you could consider would be to use/extend existing components to get what you need. Some potential examples might be ProseMirror or tiptap. I have no experience whatsoever with these, so couldn't really help beyond a quick Google search. They may be a bit heavy for what you need. They might be perfect.