Quill: Changing Link Title rather than just URL

[Luciam91]

Hello,

We are currently using Quill to power our text editor and for the most part it provides most of what we need. However, one thing that we noted with the snow theme was that you can't edit the title of a link, but rather just the URL content.

Most editors will allow for the editing of both the title and URL, I've tried extending the theme to add this option but this seems like a long, cumbersome workaround for something like this.

What I'd like to know is either A) if it's possible this is likely to be added to the core them, or B) If there are any guides on providing our own theme to add this option?

[1c7]

Hi @Luciam91

Sorry I didn't understand you description.

here is Quill playground codepen:

https://codepen.io/1c7/pen/KxzMEW

if you want edit title:

just edit it like text

If you want edit link

[1c7]

oh wait. you mean <a title='x'> ?
when mouse hover, it show title. that's what you mean right?

[1c7]

(I am editing this directly in Chrome developer tool)

[Luciam91]

Hi!

Thanks for the response, and I can understand the confusion!

What I meant was changing the content within the Quill Editor, while it is possible to change text within the middle of the link, it's not possible to add text to the start or the end. This is how it is possible in Google Docs:

I hope this helps you understand what I mean a bit better

[1c7]

@Luciam91

base on my current understanding.
Quill doesn't provide this kind of edit right out of box.
you have to code this yourself. ( I just build one few days ago, with Vue.js )

btw I am also just a user of Quill. not core team developer.

[rawkode]

@1c7 Can you share your code for this?

[1c7]

@rawkode Sure I can share 😄 I have to do a a little bit of code clean up.
because I am using Quill in a Vue.js SPA App(vuex, vue-router, single file component etc)
I may do it tonight or tomorrow. I have work to do now.

I would post code here

[rawkode]

Thanks @1c7

[1c7]

Link input ("Text" & "Link")

Final Result showcase

Click insert link button at rightmost of menu bar

Now "input link prompt" pop out

Input name and URL

Now it's successfully insert!

From Chrome console you can see the format is correct

Step 1

Use custom toolbar. not quill default one, so we can handle Link button click logic.
(I remember there are other way to handle logic, but in this example let's just continue with our custom toolbar)

Something like this. (This is HTML but written in Pug):

#toolbar-container
    #link_button(@click='add_link')
      img(src="/static/editor-icon/editor-new/link_2.svg" style='width:18px;')
#editor_wrapper
    #editor

The key here is #link_button.
we gonna write add_link method later.

Let's create a quill editor

      this.editor = new Quill('#editor', {
        modules: {
          toolbar: '#toolbar-container'
        },
        theme: 'snow',
      });

Step 2

let's write add_link

    add_link(){
      this.show_add_link_popup = true;
    }

yes I am using Vue.js
so here show_add_link_popup does only one thing.
show input box.

and then, let's insert Link

this.editor.focus();
const index = (this.editor.getSelection() || {}).index || this.editor.getLength() - 1;
this.editor.insertText(index, 'Google', 'link', "https://Google.com");

[1c7]

because I want

<a target="_blank"></a>

Here is LinkBolt I am using. I remember I copy this from Quill tutorial

      let Inline = Quill.import('blots/inline');
      class LinkBlot extends Inline {
        static create(url) {
          let node = super.create();
          node.setAttribute('href', url);
          node.setAttribute('target', '_blank'); // HERE
          return node;
        }
        static formats(node) {
          return node.getAttribute('href');
        }
      }
      LinkBlot.blotName = 'link'; // use this name
      LinkBlot.tagName = 'a';
      Quill.register(LinkBlot);

[1c7]

The key part is just one line

quill.insertText(index, 'Google', 'link', "https://Google.com");

[1c7]

@rawkode I hope this is helpful.

[rawkode]

Thank you very much, @1c7. That's awesome

[1c7]

Hi @Luciam91 have you solve your problem?
if so, can you close this issue?
if not, you could keep posting question here

[rawkode]

@1c7 I can't work out how this code helps editing of an already inserted link. Am I missing something? :)

[1c7]

@rawkode
Oh, my code above just insert link. you can't edit it with that box popup again.
that part I didn't code.

(for above screenshot, click "Link" button (that button I point with Red Arrow) would add new link, not edit)

if you want that:

when click "Link" button:
   if cursor within link:
       it's edit
   else
      it's add new link

[nereuseng]

@1c7 Hi,
How do i override the tool-tip shown default behavior when I click the Link? At first, I was tried to use default tool-tip to edit link, but the whole input text will missing.
Could you share how you solved this problem?
Thanks in advance. :)

[1c7]

@nereuseng
Sorry I can't answer your question.
I am not using Quill since (I think) August 2018 or so.
I am working on a Wechat mini App now (it's like a app but use html/css/js, not Kotlin/Swift, run on Wechat, cross platform)

I can't remember how to do that. sorry

[1c7]

At first, our website can write content with format, like a blog.
(That's why I try Quill)

but seem like people spend time on phone far more than computer(desktop/laptop)

so we just pivot into an App only product.
and we lower the bar for user post content again and again.

now we look like Instagram. ah.

[1c7]

I am quite disappoint that they don't want write official guide on how to store & display content.
see here: https://github.com/quilljs/quill/issues/2276#issuecomment-455401711

[nereuseng]

@1c7 Thank you for your reply, seems like I need to try some luck.

[ArsalanSavand]

For those who are still looking for a solution, I posted my code here with full explaination, goodluck )
https://coding.gonevis.com/how-to-edit-target-attribute-in-quilljs-links/