Insert a link in a specific index in quill editor

Question

I am trying to insert a anchor text at a specific position in the quill editor.

 var fullEditor = new Quill('#m_wiki_textarea', {
              modules: {
                'toolbar': { container: '#toolbar' },
                 'image-tooltip': true,
                'link-tooltip': true
              },
              theme: 'snow'
            });
            fullEditor.setHTML(m_wiki_current);
           //added by pavneet
            console.log("added by pavneet");

          $(document).keypress("q",function(e) {
          if(e.ctrlKey)
         {
           var range = fullEditor.getSelection();
           var index = range.start;
                console.log(range);
            console.log(index);
 fullEditor.clipboard.dangerouslyPasteHTML(index,'<a class="wiki_link_details" data-l_id="3698">Learn more from this resource</a>');
         }`

But i am getting this error , Cannot read property 'dangerouslyPasteHTML' of undefined. But i have defined the editor already.

IS there a way to insert a link in quill editor?

Answer 1

Use updateContents

Example:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

quill.insertText(0, "abc ");

var delta = {
  ops: [
    {retain: 4},
    {insert: "Learn more from this resource", attributes: {link: "http://wikipedia.org"}}
  ]
};
quill.updateContents(delta);

#editor-container {
  height: 375px;
}

<script src="//cdn.quilljs.com/1.0.6/quill.js"></script>
<link href="//cdn.quilljs.com/1.0.6/quill.snow.css" rel="stylesheet"/>
<div id="editor-container"></div>

Answer 2

Yes, you should insert a text, and then select it and make it a link (demo):

function addLink(quill, index, text, url) {
  quill.insertText(index, text, 'user');
  quill.setSelection(index, text.length);
  quill.theme.tooltip.edit('link', url);
  quill.theme.tooltip.save();
}