如何在媒体编辑器中使用链接?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (96)

我一直在尝试出色的媒体编辑器。我一直有的问题是,我似乎无法获得“工作”的链接。

最简单的方法是使用一些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');

在我看来,点击该链接应该将我带到链接href所针对的任何位置。使用链接的唯一方法是右键单击并在新选项卡或新窗口中打开 - 我不想让用户执行此操作。

在我的实际应用中,我没有使用jQuery,但我正在使用angularjs。如果一个严格的中等编辑器答案不存在,我可以退回到使用基本的JS或angularjs。

提问于
用户回答回答于

所以中等编辑器是建立在对内容的内置浏览器支持之上的contenteditable。当你实例化中等编辑器时,它会将该contenteditable=true属性添加到你提供的任何元素。

默认情况下,由于文本现在是可编辑的,因此浏览器不再支持单击要浏览的链接。因此,中等编辑器不会阻止这些链接点击发生,浏览器本身会将其作为使文本可编辑的一部分。

中等编辑器内置了用于与链接进行交互的扩展:

  • 锚点扩展
    • 允许添加/删除链接

  • 锚预览扩展
    • 显示悬停链接时的工具提示
    • 当点击工具提示时,允许通过锚点扩展来编辑链接的href

我认为编辑的根本目标是这里的误解。编辑器允许编辑文本,并且为了添加/删除/更新链接,需要能够点击进入而不会自动导航。这就是我认为的“编辑”模式。

但是,由于编辑而产生的html是有效的html,并且如果将该html放入不具有contenteditable=true属性的元素中,则所有内容都将按预期工作。我认为这是'发布模式'

用户回答回答于

我找到了如何绑定事件。

这是完整的事件列表...

尝试将代码更改为

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

扫码关注云+社区

领取腾讯云代金券