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