思源打字机模式 -- 加了一个按钮

本贴最后更新于 949 天前,其中的信息可能已经水流花落
function activate() {
  // let protyle_wysiwyg = document.querySelectorAll('div.layout__wnd--active div.protyle:not(.fn__none) div.protyle-wysiwyg');
  // let protyle_wysiwyg = document.querySelectorAll(
  //   "div.protyle:not(.fn__none) div.protyle-wysiwyg"
  // );
  let protyle_wysiwyg = document.querySelectorAll(
    "div.protyle div.protyle-wysiwyg"
  );
  // let protyle_wysiwyg = document.querySelectorAll(
  //   ".protyle"
  // );
  if (protyle_wysiwyg.length > 0) {
    for (let editor of protyle_wysiwyg) {
      editor.onkeyup = (e, t) => {
        editor.style.marginBottom = window.screen.availHeight/2 + "px";
        let block = null;
        // 当前页面
        let page = editor.parentElement;
        // let page = document.activeElement.parentElement;
        if (document.activeElement.nodeName == "TABLE") {
          // 表格获取焦点
          block = window.getSelection().focusNode.parentElement;
          while (block != null && block.nodeName != "TD")
            block = block.parentElement;
        } else {
          block = window.getSelection().focusNode.parentElement; // 当前光标

          while (block != null && block.dataset.nodeId == null)
            block = block.parentElement;
        }
        if (block == null || page == null) return;
        let block_height = block.clientHeight; // 当前块的高度
        let block_bottom = block.getBoundingClientRect().bottom; // 当前块的底部

        let page_height = page.clientHeight; // 当前页面的高度
        let page_bottom = page.getBoundingClientRect().bottom; // 当前页面的底部

        // console.log(block_height, block_bottom, page_height, page_bottom);

        page.style.scrollBehavior = "smooth";
        page.scrollBy(
          0,
          -(page_bottom - page_height / 2 - (block_bottom - block_height / 2))
        );
      };
    }
  }
}

function deactivate() {
  let protyle_wysiwyg = document.querySelectorAll(
    "div.protyle:not(.fn__none) div.protyle-wysiwyg"
  );
  if (protyle_wysiwyg.length > 0) {
    for (let editor of protyle_wysiwyg) {
      editor.onkeyup = (e, t) => {};
    }
  }
}

var sync = document.getElementById("barSync");
sync.insertAdjacentHTML(
  "afterend",
  '<div id="type"class="toolbar__item b3-tooltips b3-tooltips__se"></div>'
);
var typ = document.getElementById("type");
typ.style.width = "auto";
var unenbleIcon =
  '<svg t="1647999956702" class="icon" style="display: block;"viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" width="20" height="32"><path d="M886.3 917.9H133.4c-18.5 0-35.9-8.2-47.7-22.4S69 862.6 72.5 844.4L122 581.1c5.5-29.3 31.1-50.6 60.9-50.6h654.7c29.9 0 55.5 21.4 61 50.8l48.6 263.2c3.4 18.2-1.5 36.8-13.3 51-11.8 14.3-29.1 22.4-47.6 22.4zM182.9 553c-19 0-35.4 13.6-38.9 32.2L94.5 848.6c-2.2 11.6 0.9 23.5 8.4 32.6 7.5 9.1 18.6 14.3 30.4 14.3h752.9c11.8 0 22.8-5.2 30.4-14.3 7.5-9.1 10.6-20.9 8.5-32.6l-48.6-263.2c-3.5-18.8-19.9-32.4-39-32.4H182.9z" fill="#bfbfbf" p-id="1686"></path><path d="M747 658.7H509.8c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2H747c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM812.6 801.9H207.1c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2h605.5c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM724.5 553H295.1V77.8h429.5V553z m-407-22.4H702V100.2H317.5v430.4z" fill="#bfbfbf" p-id="1687"></path><path d="M309.9 658.8H265c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2s-5 11.2-11.2 11.2zM437.9 658.8H393c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2 0.1 6.1-5 11.2-11.2 11.2z" fill="#bfbfbf" p-id="1688"></path></svg>';
var enbleIcon =
  '<svg t="1647999956702" style="display: block;"class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" width="20" height="32"><path d="M886.3 917.9H133.4c-18.5 0-35.9-8.2-47.7-22.4S69 862.6 72.5 844.4L122 581.1c5.5-29.3 31.1-50.6 60.9-50.6h654.7c29.9 0 55.5 21.4 61 50.8l48.6 263.2c3.4 18.2-1.5 36.8-13.3 51-11.8 14.3-29.1 22.4-47.6 22.4zM182.9 553c-19 0-35.4 13.6-38.9 32.2L94.5 848.6c-2.2 11.6 0.9 23.5 8.4 32.6 7.5 9.1 18.6 14.3 30.4 14.3h752.9c11.8 0 22.8-5.2 30.4-14.3 7.5-9.1 10.6-20.9 8.5-32.6l-48.6-263.2c-3.5-18.8-19.9-32.4-39-32.4H182.9z" fill="#1f2339" p-id="1686"></path><path d="M747 658.7H509.8c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2H747c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM812.6 801.9H207.1c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2h605.5c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM724.5 553H295.1V77.8h429.5V553z m-407-22.4H702V100.2H317.5v430.4z" fill="#1f2339" p-id="1687"></path><path d="M309.9 658.8H265c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2s-5 11.2-11.2 11.2zM437.9 658.8H393c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2 0.1 6.1-5 11.2-11.2 11.2z" fill="#1f2339" p-id="1688"></path></svg>';
if (localStorage.getItem("typrt") == null) {
  localStorage.setItem("typrt", "false");
}
if (localStorage.getItem("typrt") == "false") {
  typ.innerHTML = unenbleIcon;
} else if (localStorage.getItem("typrt") == "true") {
  typ.innerHTML = enbleIcon;
  document.body.onclick = activate;
}
typ.onclick = (e) => {
  // var typ = document.getElementById("type");
  // console.log(typ);
  if (localStorage.getItem("typrt") == "false") {
    localStorage.setItem("typrt", "true");
    typ.innerHTML = enbleIcon;
    document.body.onclick = activate;
  } else if (localStorage.getItem("typrt") == "true") {
    localStorage.setItem("typrt", "false");
    typ.innerHTML = unenbleIcon;
    document.body.onclick = null;
    deactivate();
  }
};

加到 theme.js 文件后面,按钮亮起即为开启,再点一次就是关闭.

利用 localStorage 存储当前模式是否开启不知道是不是有副作用.

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22025 引用 • 87847 回帖 • 3 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 60 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 663 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 7 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 164 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 534 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 31 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 126 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    197 引用 • 547 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 452 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    221 引用 • 473 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 136 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    338 引用 • 705 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 541 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 151 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • V2Ray
    1 引用 • 15 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 74 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 367 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    677 引用 • 535 回帖