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

【问题标题】：Insert a link in a specific index in quill editor在羽毛笔编辑器的特定索引中插入链接
【发布时间】：2021-05-21 05:18:01
【问题描述】：

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

 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”。但是我已经定义了编辑器。

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

【问题讨论】：

您使用的是什么版本的 Quill？您的初始化语法看起来像 v0.20。
@jhchen - 当你在编辑器中加粗某些文本时，有没有办法添加
标签
你应该看看 0.20 文档然后quilljs.com/0.20

标签： quill

【解决方案1】：

使用updateContents

示例：

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>

【讨论】：

有什么方法可以插入带有类属性和数据属性的 div 或锚点或 parah（基本上是任何元素）？
您不能插入任意 HTML。您可以使用 clipboard.dangerouslyPasteHTML(html)。 Quill 会将您的 HTML 转换为操作并保留支持的格式。您可以按照本指南添加更多格式quilljs.com/guides/how-to-customize-quill/…
这些指南很难理解。您能否分享一个添加类属性或数据属性的工作示例。如果我使用 sethtml() 函数，它可以工作，但我需要在某个位置添加元素
输入一些文字。选择它并单击 C 按钮（自定义）。跨度将有一个类 ql-custom-test。示例：codepen.io/anon/pen/PGRQrx
这是一个如何使用 API 中的 ql-custom-test 格式化文本的示例：codepen.io/anon/pen/ORvvXG

【解决方案2】：

是的，您应该插入一个文本，然后选择它并使其成为链接 (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();
}

【讨论】：