问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ckeditor5中如何拦截a标签的跳转？

头像
凌览
    219625

    使用了ckeditor5富文本编辑器，但添加link、autolink插件功能后，添加链接会生成一个a标签，ctrl/command+鼠标点击后才会跳转新的页面。
    现在我的需求是不想让它跳转，在触发跳转事件时获取到a标签的href再拼接一层做一些逻辑处理

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="editor">This is some sample content.</div>

    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
     <script>

        ClassicEditor.create(document.getElementById('editor'), {
            licenseKey: '',
            // plugins:[Link,AutoLink],
            toolbar: {
                items: [
                    'heading',
                    'link',
                    'bold',
                    'italic',
                    'underline',
                    'fontColor',
                    'fontBackgroundColor',
                    'blockQuote',
                    'imageUpload',
                    'undo',
                    'redo'
                ]
            },
            link: {
                decorators: [
                    {
                        mode: 'manual',
                        label: 'Downloadable',
                        attributes: {
                            download: 'download'
                        }
                    }
                ]
            },
        })
            .then(editor => {
                editor.model.document.on('change:data', (e) => {
                    const doms = document.querySelector('#contian').querySelectorAll('a')
                    console.log(doms);
                    doms.forEach(dom => {
                        // dom.setAttribute("onclick",'')
                        // const href = dom.href
                        dom.href = 'javascript:void(0)'
                        // dom.href = 'dingtalk://dingtalkclient/page/link?url=' + encodeURIComponent(href)
                        // // dom.setAttribute('data-href', href)
                    })
                })
            })
            .catch(error => {
                console.error('ckEditor error');
                reject(error);
            });
    </script>
</body>

</html>

    我遇到的难点：

    1. ctrl/command+鼠标点击事件监听不到，给a标签绑定onclick事件阻止跳转失效，它会被重置
    2. 获取a标签后，重新给href赋值，但只要在编辑器内有操作，它的href就会被重置成原来的

    请求有什么方法可以达到在富文本编辑器内不让a标签默认跳转，而是ctrl/command+鼠标点击事件时获取a的href，再自己包一层跳转逻辑？

    前端ckeditorjavascripthtmlhtml5
    阅读 1.7k
    1 个回答
    得票最新
    头像头饰
    MrBigShot
      4.8k1587118

      可以使用事件捕获和阻止默认事件实现

      document.getElementById('editor').addEventListener('click', (e) => {
  if (e.target.tagName === 'A') { // 判断是否是 a 标签
     e.preventDefault() // 阻止默认点击跳转事件
     console.log(e.target.getAttribute('href'))
     const isMac = /macintosh|mac os x/i.test(navigator.userAgent)
     if ((isMac && window.event.metaKey) || window.event.ctrlKey) {
        console.log('command 或者 ctrl 被按住了！') // 处理你要的逻辑，反正链接你也拿到了
     }
  }
}, true)
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏