How do I change the hyperlink placeholder text?

[nthgol]

Is there a bug in Quill? No

React-Quill version

• [ x] master
• [ ] 0.4.1
• [ ] 1.0.0-beta-1
• [ ] 1.0.0-beta-2
• [ ] 1.0.0-beta-3
• [ ] 1.0.0-beta-4
• [ ] 1.0.0-beta-5
• [ ] 1.0.0-rc-1
• [ ] 1.0.0-rc-2
• [ ] 1.0.0-rc-3
• [ ] 1.0.0
• [ ] 1.1.0
• [ ] Other (fork)

Sorry folks, we looked through all the docs and can't for the life of us figure out how to change the placeholder on the hyperlink insert in the toolbar. Can anyone help out? Thanks

[zoranbabic]

If you are asking about this placeholder

You can do this by updating the handlers

export const modules = {
  toolbar: {
    handlers: {
      link: function(value: string) {
        const that: any = this;

        const tooltip = that.quill.theme.tooltip;
        const input = tooltip.root.querySelector("input[data-link]");
        input.dataset.link = "www.placeholder.io";
        input.placeholder = "www.placeholder.io";
        input.dataset.lpignore = true;

        // https://github.com/quilljs/quill/blob/develop/themes/snow.js#L113
        if (value) {
          const range = that.quill.getSelection();
          if (range == null || range.length === 0) { return; }
          let preview = that.quill.getText(range);
          if (
            /^\S+@\S+\.\S+$/.test(preview) &&
            preview.indexOf("mailto:") !== 0
          ) {
            preview = `mailto:${preview}`;
          }
          const { tooltip } = that.quill.theme;
          tooltip.edit("link", preview);
        } else {
          that.quill.format("link", false);
        }
      },
    },
  },
};

[nthgol]

will try! thank you

On Thu, Nov 21, 2019 at 8:46 AM z0ran8 [email protected] wrote:

If you are asking about this placeholder

[image: placeholder] https://user-images.githubusercontent.com/5425495/69342823-aa37b400-0c6c-11ea-8f27-087c3d05707e.png

You can do this by updating the handlers

export const modules = { toolbar: { handlers: { link: function(value: string) { const that: any = this;

    const tooltip = that.quill.theme.tooltip;
    const input = tooltip.root.querySelector("input[data-link]");
    input.dataset.link = "www.placeholder.io";
    input.placeholder = "www.placeholder.io";
    input.dataset.lpignore = true;

    // https://github.com/quilljs/quill/blob/develop/themes/snow.js#L113
    if (value) {
      const range = that.quill.getSelection();
      if (range == null || range.length === 0) { return; }
      let preview = that.quill.getText(range);
      if (
        /^\S+@\S+\.\S+$/.test(preview) &&
        preview.indexOf("mailto:") !== 0
      ) {
        preview = `mailto:${preview}`;
      }
      const { tooltip } = that.quill.theme;
      tooltip.edit("link", preview);
    } else {
      that.quill.format("link", false);
    }
  },
},

}, };

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zenoamaro/react-quill/issues/546?email_source=notifications&email_token=AGJSNXXWTYQLWFX4H4AAJU3QU2GLBA5CNFSM4JK2S5G2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE2IUYI#issuecomment-557091425, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGJSNXV572QJSHJUNFJUGYTQU2GLBANCNFSM4JK2S5GQ .

[Nondukishor]

will try! thank you … On Thu, Nov 21, 2019 at 8:46 AM z0ran8 @.***> wrote: If you are asking about this placeholder [image: placeholder] https://user-images.githubusercontent.com/5425495/69342823-aa37b400-0c6c-11ea-8f27-087c3d05707e.png You can do this by updating the handlers export const modules = { toolbar: { handlers: { link: function(value: string) { const that: any = this; const tooltip = that.quill.theme.tooltip; const input = tooltip.root.querySelector("input[data-link]"); input.dataset.link = "www.placeholder.io"; input.placeholder = "www.placeholder.io"; input.dataset.lpignore = true; // https://github.com/quilljs/quill/blob/develop/themes/snow.js#L113 if (value) { const range = that.quill.getSelection(); if (range == null || range.length === 0) { return; } let preview = that.quill.getText(range); if ( /^\S+@\S+.\S+$/.test(preview) && preview.indexOf("mailto:") !== 0 ) { preview = mailto:${preview}; } const { tooltip } = that.quill.theme; tooltip.edit("link", preview); } else { that.quill.format("link", false); } }, }, }, }; — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#546?email_source=notifications&email_token=AGJSNXXWTYQLWFX4H4AAJU3QU2GLBA5CNFSM4JK2S5G2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEE2IUYI#issuecomment-557091425>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGJSNXV572QJSHJUNFJUGYTQU2GLBANCNFSM4JK2S5GQ .

is solved?

[aliakbarazizi]

I use this in componentdidmount and its work

const input = document.querySelector( "input[data-link]" ) as HTMLInputElement; input.dataset.link = "https://www.site.com"; input.placeholder = "https://www.site.com";

[fnaticshy]

i do it on blur event quill-editor component, how to do it through the config object, didn’t find =(

    blurHandler() {
      const el = document.querySelector('.ql-tooltip [data-link]');

      if (!el) {
        return;
      }

      el.setAttribute('placeholder', '');
      el.setAttribute('data-link', '');
    }