欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

为Typora添加从一个文档跳到另一个文档的功能,并且自带锚点

程序员文章站 2022-03-02 10:28:36
应用场景使用Typora记录笔记的时候虽然支持页间跳转,但是不支持文档之间的跳转,很不方便。所以,我自己为Typora添加一点小功能,毕竟这是个伪装成Markdown编辑器的浏览器。/实现方式起跳节点:testJump锚点节点:he...

应用场景

使用Typora记录笔记的时候虽然支持页间跳转,但是不支持文档之间的跳转,很不方便。所以,我自己为Typora添加一点小功能,毕竟这是个伪装成Markdown编辑器的浏览器。

实现方式

起跳节点:

<!--使用a标签,name为jump,#跟随锚点-->
<a name="jump" href="./2.md#test">testJump</a>

锚点节点:

<!--name和锚点一致-->
<span name="test" >hello</span>

frame.js末尾添加以下代码:

该文件在安装目录下,搜索一下就可以得到

var content = document.getElementsByTagName("content")[0];
content.addEventListener("load", function() {
    window.setTimeout(function() {
        var elements = document.querySelectorAll("a[name=jump]");
        // 为每一个标记都添加点击事件
        for (let index = 0; index < elements.length; index++) {
            const element = elements[index];
            console.log(element);
            element.addEventListener("click", function(e) {
                var reg = new RegExp('\#[^\"]+', ["g"]);
                var outText = element.attributes[1].textContent;
                var jumpValue = reg.exec(outText)[0];
                window.localStorage.setItem("jump", jumpValue);
            }, true);
        }
    }, 100);
},true);

content.addEventListener("load", function() {
    window.setTimeout(function() {
        //获取需要寻找的元素 
        var value = localStorage.getItem("jump");
        var name = value.slice(1, value.length);
        var selector = "[name=" + name + "]";
        var element = document.querySelector(selector);
        var top = element.offsetParent.offsetTop;
        document.getElementsByTagName("content")[0].scrollTop = top+60;
    }, 100);
},true);

content.addEventListener("load", function() {
    window.setTimeout(function() {
        localStorage.removeItem("jump");
    }, 1000);
},true);

本文地址:https://blog.csdn.net/qq_41259552/article/details/107892376