Solution 1 :

Well, I finally managed to solve it. (Before submitting, I spend a lot of time figuring out. I don’t know how I solved it so fast)


 var ComponentClass = Vue.extend(Annotation);
            var instance = new ComponentClass();

Where: Annotation is a Vue component and the Range is the selection range obtained previously.

I hope this help someone else!

Problem :


I want to wrap some plain text in a Vue component dynamically, using mouseUp after selecting the text.

For example: <div> Hello World! </div> => <div> <Greeting/> World! </div>

Aprox solution

Right now, I’m wrapping it using document.createElement("span") and surrounding the range of the selection with it.

I have found similar questions like the next one, but I’m trying to avoid render level:

How can I dynamically wrap a substring with a component in Vue.js?


Comment posted by Ken Kinder

Well, if you solved it, you might as well accept your own answer.

Comment posted by pxstrana

@Ken Kinder I have to wait till tomorrow haha