把 CodeMirror 中链接变为可点击(Clickable Link)
作者:互联网
问题
很多编辑器,比如 VSCode 都可以自动检测文本中的链接,然后点击链接就可以打开网页。
但是 CodeMirror(一个基于 Web 的编辑器,CodePen 用的就是这个)没有自带这个功能,所以需要手动添加。
添加后的效果:
解决
方法 1(推荐)
利用 cm.eachLine
对每一行进行遍历,用正则表达式判断其中的链接,并用 cm.markText
给链接文本添加 className,
之后再监听点击事件,判断点击的元素的 className,根据按键类别打开链接。
// editor 就是 CodeMirror 的实例,也就是上面说的 cm
const urlRegex = /(https?):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g
editor.eachLine(line => {
const result = line.text.match(urlRegex)?.[0]
if (result) {
const posLine = editor.lineInfo(line).line // 链接的行号
const posStart = line.text.indexOf(result) // 链接的起始字符位置
const posEnd = posStart + result.length // 结束字符位置
editor.markText(
{ line: posLine, ch: posStart },
{ line: posLine, ch: posEnd },
{
className: 'cm-clickable-link', // 也可以直接替换文本,https://codemirror.net/doc/manual.html#markText
}
)
}
})
editor.on('mousedown', (_cm, event) => {
// 1 = 鼠标左键,2 = 鼠标右键,4 = 鼠标中键
if (event.buttons === 1 || event.buttons === 4) {
const element = event.target as Element
if (element.classList.contains('cm-clickable-link')) {
// 打开链接 ...
}
}
})
方法 2
在 cm.renderLine
中直接添加包含链接的元素的 className,这种方法的缺点是包含链接的元素中可能不止含有链接,比如还有引号之类的。
下面是我参考的一个开源项目 tulios/json-viewer 的效果,后面的代码也是我根据他改编的。
editor.on('renderLine', (cm, line, element) => {
// 选择一行中所有的 `.cm-string`,这里对应的是 JSON 中的 `值`,可以根据自己的需求改
const nodes = element.querySelectorAll('.cm-string')
if (nodes && nodes.length > 0) {
// 对于每一个 `.cm-string` 执行 ...
nodes.forEach(node => {
if (node) {
const result = node.textContent?.match(urlRegex)?.[0]
if (result) {
node.classList.add('cm-clickable-link')
node.setAttribute('url', result)
}
}
})
}
})
// 后面和 方法 1 中的监听 mousedown 相同
方法 3
针对 方法 2 中的缺点,还有一种解决方法就是直接替换 node
为 HTML,
但这种方法也有缺点,就是修改后的链接无法被选中,而且在某些时候会消失,性能也不好。
editor.on('renderLine', (cm, line, element) => {
const nodes = element.querySelectorAll('span')
if (nodes && nodes.length > 0) {
nodes.forEach(node => {
if (node) {
const result = node.textContent?.match(urlRegex)?.[0]
if (result) {
// node.classList.add('cm-clickable-link')
// node.setAttribute('url', result)
// 替换成:
node.innerHTML = node.innerHTML.replace(
result,
`<span data-url="${result}" class="cm-string cm-clickable-link">${result}</span>`
)
}
}
})
}
})
标签:node,const,cm,Link,result,Clickable,line,CodeMirror,链接 来源: https://www.cnblogs.com/liangfengning/p/14633414.html