Wrap text in a Vue component dynamically

Question

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?

pxstrana · Accepted Answer · 2020-06-16 18:00:33Z

2

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)

Solution

 var ComponentClass = Vue.extend(Annotation);
            var instance = new ComponentClass();
            instance.$mount();
            this.range.deleteContents();
            this.range.insertNode(instance.$el);

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

I hope this help someone else!

edited Jun 16, 2020 at 18:00

answered Jun 15, 2020 at 20:29

pxstrana

8810 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ken Kinder Over a year ago

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

pxstrana Over a year ago

@Ken Kinder I have to wait till tomorrow haha

Collectives™ on Stack Overflow

Wrap text in a Vue component dynamically

Problem

Aprox solution

1 Answer 1

Solution

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Aprox solution

1 Answer 1

Solution

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related