Question

我一直在尝试优秀的Medium Editor。我一直遇到的问题是我似乎无法获得“工作”的链接。

最简单的是，这里有一些用于演示问题的HTML / JS：

HTML：

<html>
<head>
  <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/themes/beagle.min.css" type="text/css">
</head>
<body>
  <div class='editable'>
    Hello world.  <a href="http://www.google.com">link</a>
  </div>
</body>
</html>

使用Javascript：

var editor = new MediumEditor('.editable');

此fiddle演示了此问题（使用上面的代码）。

如果您将鼠标悬停在链接上，则会显示一个弹出窗口。
如果您点击该链接，则不会发生任何事情。
如果单击弹出窗口，则会出现一个表单，您可以在其中编辑链接。

在我看来，点击该链接应该会在链接href定位的任何地方带我。使用该链接的唯一方法是右键单击并在新选项卡或新窗口中打开 - 我不想让我的用户这样做。

我觉得我必须在配置中遗漏一些简单的东西（Anchor Preview Options或Anchor Form Options）。不幸的是，我没有看到它。

^{在我的实际应用中，我不使用jQuery，但我正在使用angularjs。如果不存在严格的媒体编辑器答案，我可以回退使用基本JS或angularjs提供的任何东西。}

Answer 1

我已经找到了如何绑定事件。

以下是完整的事件列表https://github.com/yabwe/medium-editor/blob/master/CUSTOM-EVENTS.md

尝试将代码更改为

var editor = new MediumEditor('.editable')
    .subscribe("editableClick", function(e){if (e.target.href) {window.open(e.target.href)}})

https://jsfiddle.net/fhr18gm1/

Answer 2

因此，中型编辑器建立在对contenteditable元素的内置浏览器支持之上。实例化介质编辑器时，它会将contenteditable=true属性添加到您提供的任何元素中。

默认情况下，由于文本现在可以编辑（contenteditable属性使浏览器将其视为WYSIWYG文本），浏览器不再支持单击要导航的链接。因此，媒体编辑器并未阻止这些链接点击的发生，浏览器本身就是将文本编辑为可编辑的一部分。

中型编辑器内置了与链接交互的扩展程序：

锚点扩展
- 允许添加/删除链接
anchor-preview扩展
- 显示悬停链接时的工具提示
- 单击工具提示时，允许通过锚点扩展

我认为编辑的基本目标是误解。编辑器允许编辑文本，并且为了添加/删除/更新链接，您需要能够在不自动导航的情况下单击它。这就是我所说的“编辑”模式。

但是，编辑后生成的html是有效的html，如果你把那个html放在一个没有contenteditable=true属性的元素里面，一切都会按预期工作。我认为这是'发布模式'

我看看像word或google文档这样的编辑器，你会看到类似的行为，当你编辑文档时，链接不仅仅是当你点击它们时导航，你必须实际选择导航它们单击链接后单独执行操作。但是，在文档的“已发布”版本上，单击该链接将实际打开浏览器窗口并在那里导航。

我认为这确实是一个很好的建议，作为对现有锚定预览扩展的增强。也许悬停链接时出现的工具提示可能有多个选项（即编辑链接|删除链接|导航到URL）。

<强> tldr;

通过内置的WYSIWYG支持（contenteditable）在浏览器中“编辑”文本时，链接无法在点击时导航。如果不处于“编辑”模式，链接将按预期工作。这可以为中编辑器锚定预览扩展提供一个很好的增强。

Answer 3

在评论中解决@Valijon的一些想法，我能够使用以下代码使其工作：

var iElement = angular.element(mediumEditorElement);

iElement.on('click', function(event) {
  if (
      event.target && event.target.tagName == 'A' &&
      event.target.href && !event.defaultPrevented) {
    $window.open(event.target.href, '_blank');
  }
});

我认为关键是显然编辑器让事件传播给祖先元素，所以我只能听取顶级编辑器元素的点击。

^{此处，$window是有角度的$window服务 - 如果您未使用angularjs，window就可以我使用angular.element来简化事件监听器注册表，但你可以用老式的方式（或使用你选择的JS框架）来做。}

Answer 4

当我在问及＆＃34;编辑＆＃34;时，我问的问题是与Google文档类似的行为。模式（as described by Nate Mielnik）。我打开了一个issue on the Medium Editor tracker，他们决定不将它作为核心媒体编辑器的一部分来实现，但是他们注意到他们很乐意让某人添加该功能作为扩展。

因此，我决定将该功能实现为建议的扩展。它可以作为MediumTools ¹的一部分找到。该项目仍处于非常早期阶段（例如，我没有做任何事情来使样式看起来更好，或者使用更好的缩小实践等等。但我们很乐意接受Pull请求）。

代码的内容如下所示：

var ClassName = {
  INNER: 'medium-editor-toolbar-anchor-preview-inner',
  INNER_CHANGE: 'medium-editor-toolbar-anchor-preview-inner-change',
  INNER_REMOVE: 'medium-editor-toolbar-anchor-preview-inner-remove'
}

var AnchorPreview = MediumEditor.extensions.anchorPreview;
GdocMediumAnchorPreview = MediumEditor.Extension.extend.call(
  AnchorPreview, {

    /** @override */
    getTemplate: function () {
      return '<div class="medium-editor-toolbar-anchor-preview">' +
        '  <a class="' + ClassName.INNER + '"></a>' +
        '  -' +
        '  <a class="' + ClassName.INNER_CHANGE + '">Change</a>' +
        '  |' +
        '  <a class="' + ClassName.INNER_REMOVE + '">Remove</a>' +
        '</div>';
    },

    /** @override */
    createPreview: function () {
      var el = this.document.createElement('div');

      el.id = 'medium-editor-anchor-preview-' + this.getEditorId();
      el.className = 'medium-editor-anchor-preview';
      el.innerHTML = this.getTemplate();

      var targetBlank =
          this.getEditorOption('targetBlank') ||
          this.getEditorOption('gdocAnchorTargetBlank');
      if (targetBlank) {
        el.querySelector('.' + ClassName.INNER).target = '_blank';
      }

      var changeEl = el.querySelector('.' + ClassName.INNER_CHANGE);
      this.on(changeEl, 'click', this.handleClick.bind(this));

      var unlinkEl = el.querySelector('.' + ClassName.INNER_REMOVE);
      this.on(unlinkEl, 'click', this.handleUnlink.bind(this));

      return el;
    },

    /** Unlink the currently active anchor. */
    handleUnlink: function() {
      var activeAnchor = this.activeAnchor;
      if (activeAnchor) {
        this.activeAnchor.outerHTML = this.activeAnchor.innerHTML;
        this.hidePreview();
      }
    }
  });

作为一种解释，我只是将中型原型的继承用于＆＃34;子类＆＃34;原始/内置AnchorPreview扩展名。我重写getTemplate方法以将其他链接添加到标记中。然后我从getPreview的基本实现中借了很多东西，但是我在适当的时候对每个链接绑定了新的操作。最后，我需要采取行动，以取消关联＆＃34;当＆＃34;删除＆＃34;时的链接单击，所以我添加了一个方法。使用contenteditable magic（确保它是浏览器的撤销堆栈的一部分）可能会更好地完成unlink方法，但我没有花时间去弄清楚（尽管它会为任何感兴趣的人提出一个好的拉动请求： - ）。

^{¹目前，它只是部分，但我希望在某些时候会发生变化。。}

如何在Medium Editor中使用链接？

4 个答案: