如何在媒体编辑器中使用链接？
如何在媒体编辑器中使用链接？
提问于 2018-05-24 08:30:26
我一直在尝试出色的媒体编辑器。我一直有的问题是，我似乎无法获得“工作”的链接。
最简单的方法是使用一些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。
回答 2
Stack Overflow用户
发布于 2018-05-24 16:42:49
我找到了如何绑定事件。
这是完整的事件列表...
尝试将代码更改为
var editor = new MediumEditor('.editable')
.subscribe("editableClick", function(e){if (e.target.href) {window.open(e.target.href)}})Stack Overflow用户
发布于 2018-05-24 18:04:47
所以中等编辑器是建立在对内容的内置浏览器支持之上的contenteditable。当你实例化中等编辑器时，它会将该contenteditable=true属性添加到你提供的任何元素。
默认情况下，由于文本现在是可编辑的，因此浏览器不再支持单击要浏览的链接。因此，中等编辑器不会阻止这些链接点击发生，浏览器本身会将其作为使文本可编辑的一部分。
中等编辑器内置了用于与链接进行交互的扩展：
- 锚点扩展
- 允许添加/删除链接
- 锚预览扩展
- 显示悬停链接时的工具提示
- 当点击工具提示时，允许通过锚点扩展来编辑链接的href
我认为编辑的根本目标是这里的误解。编辑器允许编辑文本，并且为了添加/删除/更新链接，需要能够点击进入而不会自动导航。这就是我认为的“编辑”模式。
但是，由于编辑而产生的html是有效的html，并且如果将该html放入不具有contenteditable=true属性的元素中，则所有内容都将按预期工作。我认为这是'发布模式'
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008574
复制相关文章
相似问题