quill - 在羽毛笔编辑器的特定索引中插入链接

Question

我正在尝试在羽毛笔编辑器的特定位置插入锚文本。

 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>');
         }`

但我收到此错误，无法读取未定义的属性“dangerouslyPasteHTML”。但我已经定义了编辑器。

有没有办法在羽毛笔编辑器中插入链接？

Answer 1

使用更新内容

例子：

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

是的，您应该插入一个文本，然后选择它并使其成为链接（演示）：

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();
}