[Vuejs]-How to replace in VueJS some selected text with an Element-UI button in runtime?

0👍

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.

Leave a comment