编辑区域宽度设置

本贴最后更新于 1194 天前,其中的信息可能已经渤澥桑田

版本 v1.2.31 不能进行编辑区域的宽度设置,没有找到对应选项。宽度不能锁定,在复杂应用场景(不同分辨率、拖动/开关侧边副栏宽度)切换时,影响排版美观度,希望予以解决。

  • 思源笔记

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

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

    22340 引用 • 89396 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8115 引用 • 37010 回帖 • 160 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 这个暂时不会调整了,之前是有宽度选项的,但是加了这个选项会导致其他问题,如果一定需要的话建议自定义 CSS。

    1 回复
  • Achuan-2 2

    +1,我真的为了调整宽度,折腾了好久,改到怀疑人生。

    改了内容,还要改标题,改了标题,发现旁边的标题块图标位置又不对,改完了之后,发现标题的块引用位置也不对。

    终于全改完之后 心想终于完美了,可以享受了

    然后晚上就出了文档图标。。。

    按我改的方式(限制最大宽度,垂直居中)再也不能让文档图标全屏后还在标题正上方了,不过忍一忍也还好。

    后来又发现分屏内容的宽度会太宽,无语,于是后面就只改了预览页面

    如果有需要的话可以看看,其实后面我也发现编辑区域的宽度设置其实也还好,最大的问题是预览页面实在太宽

    /* ---------------编辑器内容两侧宽度设置 Start ————————————————————————*/
    
    /* 调整思源编辑器内容最大宽度 */
    .protyle-content > .protyle-wysiwyg,
    .protyle  .b3-typography *,
    .protyle-content > .protyle-title,
    .protyle-content > .protyle-title .protyle-title__input{
        /* 如果要调整编辑器宽度只需调整下面这个值 */
        max-width: 1000px;
    }
    
    /* 居中 */
    .protyle-content > .protyle-wysiwyg,
    .protyle  .b3-typography *{
        margin: 0px auto !important;
    }
    
    /* 调整两侧宽度 */
    /* 要调整宽度,就搜索75px 把下面是75px的全部修改 */
    .protyle-content > .protyle-wysiwyg {
        /* 思源的编辑器在宽度较小的时候会主动调小编辑器内容,晕😵 */
        /* 所以我就搞固定宽度了,不然不好调整 */
        padding: 16px 75px 162px !important;
    
    }
    
    .protyle-content > .protyle-title {
        margin: 16px auto 0px !important;
        /* 原来title就有margin 96px,上面为了水平居中就清除了,于是改为padding,
        保证标题和内容对齐
         */
        padding: 0px 75px 0px;
    }
    .protyle-background__icon {
        /* 文档图标 */
        left: 75px !important;
    }
    .protyle-title .protyle-title__icon  {
        /* 标题的块图标还在原来的位置,也要修改 */
        margin: -15px 0 0 75px;
    }
    .protyle-title .protyle-attr {
        /* 然后文档右边的引用数原来是right0,要改成前面设置的宽度 */
        right: 75px;
    }
    
    /* 调整手机和平板端 */
    @media screen and (max-width: 1023px) {
        /* 这里我假设平板最大宽度为1023px,小于此大小的屏幕将调整
        页面两侧宽度 */
        .protyle-content > .protyle-wysiwyg {
            padding: 16px 16px 162px !important;
    
        }
    
        .protyle-content > .protyle-title {
            margin: 16px auto 0px !important;
            /* 原来title就有margin 96px,上面为了水平居中就清除了,于是改为padding,
            保证标题和内容对齐
            */
            padding: 0px 16px 0px;
        }
        .protyle-background__icon {
            /* 文档图标 */
            left: 16px !important;
        }
        .protyle-title .protyle-title__icon  {
            /* 标题的块图标还在原来的位置,也要修改 */
            margin: -15px 0 0 16px;
        }
        .protyle-title .protyle-attr {
            /* 然后文档右边的引用数原来是right0,要改成前面设置的宽度 */
            right: 16px;
        }
    }
    
    /* ---------------编辑器内容两侧宽度设置 END ———————————————————————— */
    
    1 回复
  • 如果只调整预览页面的宽度,使其居中

    /* ---------------编辑器内容两侧宽度设置 Start ————————————————————————*/
    /* 已放弃调整即时编辑内容两侧宽度,只调整预览模式 */
    /* 调整思源编辑器内容最大宽度 */
    .protyle  .b3-typography * {
        /* 如果要调整编辑器宽度只需调整下面这个值 */
        max-width: 1000px;
    }
    
    /* 居中 */
    .protyle  .b3-typography *{
        margin: 0px auto !important;
    }
    /* ---------------编辑器内容两侧宽度设置 END ———————————————————————— */
    
    
  • ycbrdds

    我用楼上自定义 css 文件的方法直接修改自带 midnight 主题,每次重启程序编辑器宽度会自动恢复回去。但是第三方 dark+ 主题的 css 修改之后每次开启都是窄宽度的。这可能什么缘故呢?

    1 回复
  • 88250 1 1 赞同

    默认主题会自动重置,请参考帮助文档自定义主题章节。

  • 倒是能改默认宽度,但是改后图片好像不能拉缩了 😂 ,这个 bug 有办法吗大佬

请输入回帖内容 ...

推荐标签 标签

  • OnlyOffice
    4 引用 • 2 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 529 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 462 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    407 引用 • 1246 回帖 • 582 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 113 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    351 引用 • 1814 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 373 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 672 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 210 关注
  • PWA

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

    14 引用 • 69 回帖 • 154 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 709 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    77 引用 • 390 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • Swift

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

    36 引用 • 37 回帖 • 529 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 8 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖