Question

我试图为链接输入值编写自定义处理程序。如果用户输入的链接没有自定义协议，我希望在输入值之前添加http:。这是因为如果链接值缺少http：，则不解释链接并且显示内部about:blank。（https://github.com/quilljs/quill/issues/1268#issuecomment-272959998）

以下是我所写的内容（类似于官方示例here）：

toolbar.addHandler("link", function sanitizeLinkInput(linkValueInput) {
    console.log(linkValueInput); // debugging

    if (linkValueInput === "")
        this.quill.format(false);

    // do nothing, since it implies user has just clicked the icon
    // for link, hasn't entered url yet
    else if (linkValueInput == true);

    // do nothing, since this implies user's already using a custom protocol
    else if (/^\w+:/.test(linkValueInput));

    else if (!/^https?:/.test(linkValueInput)) {
        linkValueInput = "http:" + linkValueInput;
        this.quill.format("link", linkValueInput);
    }
});

每次用户点击链接图标时，都不会发生任何事情，并且会在控制台中记录true。我实际上希望在人们点击“＃34; save＆＃34;在按下链接图标后显示的工具提示中。

知道怎么做吗？提示或建议也很受欢迎。

谢谢！

Answer 1

聚集所有信息

snow主题本身使用工具栏的addHandler来显示工具提示，因此无法使用addHandler方法来实现我们想要的目标。

所以，我们可以做以下事情：

var Link = Quill.import('formats/link');
var builtInFunc = Link.sanitize;
Link.sanitize = function customSanitizeLinkInput(linkValueInput) {
    var val = linkValueInput;

    // do nothing, since this implies user's already using a custom protocol
    if (/^\w+:/.test(val));
    else if (!/^https?:/.test(val))
        val = "http:" + val;

    return builtInFunc.call(this, val); // retain the built-in logic
};

此方法不会挂钩处理程序，而是修改内置的清理逻辑本身。我们还保留了卫生处理的原始行为，因此不会修改编辑器的原始行为。

或者，我们实际上可以使用this code挂钩工具提示的保存按钮。但与上面的方法相比，它的方法太长了。

Answer 2

当单击工具栏中的按钮时，工具栏处理程序只调用您的给定函数。传入的value取决于用户选择中该格式的状态。因此，如果用户突出显示纯文本，然后单击链接按钮，您将获得false。如果用户突出显示该链接，您将获得该链接的值，默认情况下为该URL。这可以通过以下示例进行解释：http://quilljs.com/docs/modules/toolbar/#handlers。

snow主题使用工具栏的addHandler本身来显示工具提示，看起来你正试图挂钩，这是目前无法实现的。

看起来你真正想做的是控制链接的清理逻辑。 Quill中存在较低级别的清理，因为有很多方法可以插入链接，例如从工具提示UI，粘贴，不同API等等。因此，要覆盖它们，所有逻辑都是链接格式本身。 http://quilljs.com/guides/cloning-medium-with-parchment/#links中介绍了自定义链接格式的示例。您也可以只修改Quill自己的清理方法，但不建议这样做，因为它没有记录，也没有被semver覆盖。

let Link = Quill.import('formats/link');
Link.sanitize = function(value) {
  return 'customsanitizedvalue';
}

Answer 3

据我所知，创建和更新链接的处理在Quill的源代码中有点分布。默认的Snow主题在某种程度上处理编辑链接：它在内部跟踪用户选择和上次选择的链接。因此我不认为只使用自定义处理程序就可以在Quill中实现您想要的目标。

您可能想要打开一个问题来报告此问题，作者可能愿意添加这样的处理程序。

与此同时，我想出了一种通过简单地监听导致编辑工具提示关闭的事件来更新链接的方法。有一些复杂性，因为可以编辑链接，然后主题依赖于其内部跟踪来更新它。但总而言之，我认为这个解决方案并不算太糟糕。你可能想在这里和那里添加一些错误检查，但总的来说它似乎很好地工作并做你想做的事情。我创建了一个Fiddle来证明这一点。为了完整起见，我将其作为代码片段包含在此处。

var quill = new Quill('#editor', {
    modules: {
      toolbar: true
    },
    theme: 'snow'
  }),
  editor = document.getElementById('editor'),
  lastLinkRange = null;

/**
 * Add protocol to link if it is missing. Considers the current selection in Quill.
 */
function updateLink() {
  var selection = quill.getSelection(),
    selectionChanged = false;
  if (selection === null) {
    var tooltip = quill.theme.tooltip;
    if (tooltip.hasOwnProperty('linkRange')) {
      // user started to edit a link
      lastLinkRange = tooltip.linkRange;
      return;
    } else {
      // user finished editing a link
      var format = quill.getFormat(lastLinkRange),
        link = format.link;
      quill.setSelection(lastLinkRange.index, lastLinkRange.length, 'silent');
      selectionChanged = true;
    }
  } else {
    var format = quill.getFormat();
    if (!format.hasOwnProperty('link')) {
      return; // not a link after all
    }
    var link = format.link;
  }
  // add protocol if not there yet
  if (!/^https?:/.test(link)) {
    link = 'http:' + link;
    quill.format('link', link);
    // reset selection if we changed it
    if (selectionChanged) {
      if (selection === null) {
        quill.setSelection(selection, 0, 'silent');
      } else {
        quill.setSelection(selection.index, selection.length, 'silent');
      }
    }
  }
}

// listen for clicking 'save' button
editor.addEventListener('click', function(event) {
  // only respond to clicks on link save action
  if (event.target === editor.querySelector('.ql-tooltip[data-mode="link"] .ql-action')) {
    updateLink();
  }
});

// listen for 'enter' button to save URL
editor.addEventListener('keydown', function(event) {
  // only respond to clicks on link save action
  var key = (event.which || event.keyCode);
  if (key === 13 && event.target === editor.querySelector('.ql-tooltip[data-mode="link"] input')) {
    updateLink();
  }
});

<link href="https://cdn.quilljs.com/1.1.10/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.1.10/quill.min.js"></script>
<div id="editor"></div>

如果您有任何问题，请与我们联系。

Answer 4

花了半个小时后

找到了解决方案

htmlEditorModuleConfig = {
    toolbar: [
        ['link']                        
    ],    
        bounds: document.body   
}

在配置中添加“界限：document.body”

Answer 5

我必须做同样的事情（在发送到服务器之前验证URL），所以我最终会遇到这样的事情。

FetchContent

Quill链接处理程序不起作用

5 个答案: