codemirror-在编辑器中检测并创建链接 [英] codemirror - detect and create links inside editor

问题描述

我正在使用配置为显示javascript的codemirror。

I am using codemirror, configured to display javascript.

我有这样的代码：

...
var ref =  'http://www.example.com/test.html';
var ref2 = 'http://www.example.com/test2.html';
...

在显示编辑器时，如果可以单击编辑器中可能存在的链接。该链接显然会在其他选项卡上打开页面。

When displaying the editor it would be great if I could click on the links that might be present in the editor. The link would open the page on a different tab obviously.

是否有一种简单的方法来实现此目的？

is there an easy way to achieve this ?

推荐答案

这并不容易，但是您要做的是：

Not really easy, but what you'd do is:

• 写一个识别此类链接的重叠模式。基本上，这是一种模式，当它找到类似于链接的内容时会吐出自定义令牌类型，否则为null。您可以使用简单模式插件来简化此操作。您可以使用此令牌类型的CSS类（例如 link 变为 cm-link ）来设置链接样式。

• Write an overlay mode that recognizes such links. Basically, this is a mode that spits out a custom token type when it finds something that looks like a link, and null otherwise. You can use the simple mode addon to make this easier. You can use this token type's CSS class (for example "link" becomes cm-link) to style your links.

通过调用 addOverlay 方法。

Make your editor use your overlay by calling the addOverlay method.

注册 mousedown 编辑器上的事件处理程序（ instance.getWrapperElement（）。addEventListener（...））。

Register a mousedown event handler on your editor (instance.getWrapperElement().addEventListener(...)).

在此处理程序中，检查事件的 target 是否具有链接CSS类。如果是这样，则用户正在单击链接。

In this handler, check whether the event's target has the link CSS class. If it does, the user is clicking a link.

如果是，请使用 coordsChar 方法，使用鼠标事件中的坐标，以找到被单击文档中的位置。从该位置周围的文档文本中提取实际链接，并遵循该链接。

If so, use the coordsChar method, using the coordinates from your mouse event, to find the position in the document that was clicked. Extract the actual link from the document text around that position, and follow it.

（或者，甚至更好，而不是直接干扰点击，这可能会旨在将光标放在链接中或选择它，每当光标位于链接文本内部时，显示一个包含常规链接的小部件。）

(Or, even better, instead of directly interfering with the click, which might be intended to put the cursor in the link or select it, show a widget containing a regular link whenever the cursor is inside of link text.)

这篇关于codemirror-在编辑器中检测并创建链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！