To see this working, head to your live site.

How to insert link on cursor position of tiptap editor in VueJS?

I'm new to VueJS and even more to the tiptap editor that my team is using. I need to make a function that inserts a link at the cursor position within the editor.

I do know about the Link() function with the floating menu bubble. That's already working. But in the web application, they would like to have a pop-up with an option to fill in a display text and a corresponding link, which should be inserted to the editor at cursor position.

Currently, I already have this code:

insertLink(value) {
  let linkToAdd = '<a href="' + value.insertLinkUrl + '" target="_blank">' + value.insertLinkText + '</a>';
  let editorHtml = this.editor.getHTML();
  editorHtml += linkToAdd;
  this.editor.setContent(editorHtml);
}

But, now it appends to the end of the content and also creates a new paragraph tag in which it stores the new generated HTML(?).

Can anybody help me point a little more in the correct direction? That would be very nice.

Thanks in advance!

1 comment

Answers (1)

AnswerDeveloper

Dec 26, 2022

You can try using the insert method of the tiptap editor to insert the link at the current cursor position. The insert method takes a type and a content as its arguments.

You can define the type as 'link' and the content as an object that has url and text properties, like this:

insertLink(value) {
  this.editor.insert({
    type: 'link',
    content: {
      url: value.insertLinkUrl,
      text: value.insertLinkText,
    },
  });
}

This should insert the link at the current cursor position in the editor.

You can also specify the target property in the content object to specify whether the link should open in a new tab or not:


insertLink(value) {
  this.editor.insert({
    type: 'link',
    content: {
      url: value.insertLinkUrl,
      text: value.insertLinkText,
      target: '_blank',
    },
  });
}