LINUX SB 快照站

什么都放在这里 构建一方和谐天地

支持md的固然是好的 但是我那辛辛苦苦搞的话题已经没有过审

你发白丝了？

复刻一个猎户座编辑器看看
简单重新介绍:
这个编辑器力图还原论坛编辑器的体验 同时个性化发展 听从大家的意见，不断改进
编辑器完全离线运行 秒级自动保存 确保内容不丢失，不受网络环境波动影响
如今很多重要的功能(比如emoji表情)还未能支持，一些功能还存在体验上的问题 希望大家多多反馈鞭策 ~~我会去鞭策AI的~~

即日起，正式脱离webSIM三方平台(现在国区应该无法访问，并且受网络环境限制，可能访问较慢) 现在我随便都能找到AI()
从今天起推荐使用cloudflare加速链接访问~
orion-composer.stellafortuna.dpdns.org
同时产品名优化为:
orion-composer
名为猎户座
而天下皆可用~

相关介绍和教程仍然可以参考原话题:
https://linux.do/t/topic/886817?u=stellafortuna

为了让你快速上手，不用跳转原话题
这里直接重新给出教程(每次版本更新都会同步更新，但可能不是实时同步)

为你介绍这款编辑器的所有功能~

让我们从你第一眼看到的东西开始吧
(当然，这里以手机界面为主)

【核心工具栏:你的创作魔法棒】

这是一排整齐的按钮，从左到右，它们是你施展文字魔法的道具，在手机上，你可以左右滑动来查看全部工具哦

• H - 标题

默认会给你一个二号大标题(## )，这在文章里最常用啦，当然，你可以自己手动打「#」，一个「#」是一级标题，字最大;六个「#」是六级标题，字最小，它只是帮你快速开始

[details="完整教程!!!"]

• B - 粗体

那个大大的 B?就是加粗啦!选中你想强调的文字，点一下，它就会被两对小星星 ** 包裹起来，瞬间变得醒目

• I - 「斜体」

紧挨着粗体的 I，就是「斜体」，同样是选中文字点一下，它会被一对小星星 * 包裹，让文字带上一种特别的语调

• U - 下划线

这个功能在标准的Markdown里其实是没有的，但我们用BBCode的魔法 [u]...[/u] 实现了它!为了让你在论坛上能用上这个熟悉的格式

• ~~S~~ - ~~删除线~~

想表达一种「划掉重说」的俏皮感?用它就对啦!它会给你的文字穿上 ~~ 的外衣

• :artist_palette: - 文字颜色

这是一个超棒的功能!点一下那个小调色板图标，会弹出一个真正的调色盘，你可以随心所欲地选择任何你喜欢的颜色，它会自动生成像 [color=#FF0000]...[/color] 这样的代码，让你的文字五彩斑斓，选完颜色后光标也会自动帮你停在两个标签中间，直接就能开始打字

• :black_nib: - 切换字体

这是「猎户座」的灵魂所在!点一下这个字体图标，会有一个小小的下拉菜单:

• 默认楷体 (霞鹜文楷):带着温度和书卷气的字体，最适合静下心来慢慢写
• 优雅衬线 (思源宋体):如果你想让文章看起来更正式、更典雅，就像印在书上一样，选它准没错
• 可爱圆体 (站酷快乐体):一种活泼、快乐的字体，会让你的文字都变得元气满满!
• 导入本地字体...:一个超级酷的功能!你可以把你珍藏的任何.ttf或.otf字体文件导进来，让编辑器完全变成你喜欢的样子，不过要记住一个小秘密哦:因为浏览器的安全设定，这个字体只在当前这次使用时有效，刷新页面后就恢复到默认啦

小提醒:链接和网络图片这两个功能按钮暂时从工具栏里请假去了，语法本身完全没有消失，你依然可以手动打 [文字](链接) 或 ![alt](链接)，只是入口按钮先收起来，等我们想好更好的呈现方式再请它们回来~

• :framed_picture: - 本地图片上传

【进化】这项功能已全面升级!现在，你可以安心上传「总计高达200MB」的图片，所有图片都将安全地存储在你的浏览器数据库中，实现秒速上传与加载，只要你不主动清除浏览器缓存，它们将永远忠诚地守护你的图文记忆

• “ - 引用

当你需要引用别人的话，或者想让某段文字有独特的强调效果时，就用它，它会在你选中的文字前加上 > ，形成非常漂亮的引用块

• </> - 代码

程序员朋友或者需要分享代码片段时的最爱!它会帮你生成一个代码块 ``` ` ```，里面的内容不仅格式不会乱，还会有漂亮的语法高亮，你可以自定义代码类型声明，插入后光标会自动停在代码块内部，直接就能开始打字，不用再自己找位置点

• ▦ - 表格

别怕，这个功能超简单!点一下，它会直接给你一个基础的表格模板，「标题1」这几个字会自动被选中，你可以直接打字覆盖，不用自己去找

• :eye: - 剧透 (Spoiler)

想在文章里藏一个彩蛋或者关键信息，不希望别人一眼就看到?用它!被 [spoiler]...[/spoiler] 包裹的内容会变模糊，只有当别人点击的时候才会显示真面目

• :downwards_button: - 折叠详情

这是一个能让你的文章变得非常整洁的工具!你可以把大段的、不那么重要的补充说明，用 [details="摘要"]...[/details] 包裹起来，别人只会看到一个「摘要」标题，点一下才会展开里面的长篇大论(~~或发疯小文~~)，插入后「点击展开」四个字会自动被选中，方便你直接改成想要的标题

• --- - 分割线

想在两段内容之间来一个漂亮的分割?点它，一条分割线 --- 就出现啦
特殊知识点:手动输入「___」生成的分割线将是白色的实线，而由工具栏按钮提供的分割线将是灰色的虚线

一个奇怪的知识点:因为本网站的特殊体贴设计，导致了一些奇怪的现象，如果你输入了一段文字，而这段文字的下一行紧跟着就是分割线，那很抱歉，你这段文字即使没有加「#」也会被认为是1号大标题，超级大!请一定要多换一次行来避免这个问题

• :floppy_disk: - 保存版本

这是一个手动「快照」按钮，当你对当前写的内容特别满意，想创建一个永久的纪念时，就点一下它，这个版本会被安全地存起来，与自动保存的草稿分开

• :scroll: - 历史版本

点击这个按钮，会弹出一个列表，里面是你所有手动保存过的「快照」，如果你想找回之前某个时间点的想法，或者不小心删改了重要内容，可以在这里像穿越时间一样，轻松恢复到过去的状态

• 【测试】 :clamp: / :page_facing_up: / :national_park: - 导出中心

在工具栏的末尾，新增了三个强大的导出工具，让你的作品以多种精美的格式永久保存或分享，他们分别是:

• 导出为压缩包 (.zip) (:clamp:):一键打包你当前的文章原文(.md)和所有上传过的本地图片，下载为一个.zip文件，这是最稳妥的数据备份方式，方便你在不同设备间迁移你的整个创作库，是目前唯一绝对有效的导出工具，它会导出你在这个网站曾经上传的所有本地图片，后续会出清除这些图片的功能
• 导出为PDF文档 (:page_facing_up:):将你的文章转换成一份带格式的、专业级的PDF文件，方便打印、存档或正式分发，目前手机Chrome下载后是空白文档，Win11微软浏览器完美
• 导出为长图 (PNG) (:national_park:):将你的预览效果完整生成一张高清长图，无论是分享到社交媒体，还是作为作品截图，都非常适用，目前手机Chrome下载失败，同上，电脑浏览器可以，但是效果不佳

【浮动按钮:最终裁决!】

在页面的右下角，有一组全新的、更强大的圆形按钮，它们是你的创作控制中心:

• :eye: / :pencil: - 切换视图 (手机端)

在手机上，为了让你能专心打字，默认是看不到预览的，当你写完一段，想看看效果怎么样时，就点一下这个「眼睛」图标，页面就会切换到预览模式，想继续编辑?再点一下「铅笔」图标，就回来啦

• :scissors: - 复制

这是猎户座唯一的复制入口，点一下，会把你输入框里所有的Markdown和BBCode原文，完整地复制到剪贴板里，然后就可以去论坛的编辑器里直接粘贴发送，效果会和你在这里预览的一模一样，唯一的特殊处理是「本地图片」(在线图片不受影响):如果你在文章中上传过本地图片，复制时它们会被自动替换为清晰的占位符，例如【本地图片 1】、【本地图片 2】，方便你在论坛编辑器里一眼就找到该在哪里手动插入对应的图片，让复杂的图文混排变得井井有条!

顺带一提，本编辑器采取每1.5秒同步一次内容到本地的功能，确保内容几乎不可能丢失~(为什么是几乎不可能，因为我丢过一次 :bili_102:，关键点是编辑前请刷新页面，确保页面正常工作，确保网络环境可访问cf页面~)

好啦，这就是「猎户座编辑器」的全部秘密~

它就像是你的一个专属书房，安静、强大，并且绝对忠诚，希望它能陪着你，记录下每一个珍贵的想法和故事

现在，开始你的创作吧 :heart:
[/details]

后续更新将在此话题跟进

版本号重定向为:1.0

「v1.0.0.1」26.0712 修复了手机端点击「A」切换字体会把菜单栏高度扩充但需手动下滑的问题 现在的效果:
「v1.0.1.0」26.0717 请见https://linux.do/t/topic/2606102
「v1.0.2.0」26.0719 请见https://linux.do/t/topic/2611813

看来相关内容支持还并不算多

图片插入测试
https://cdn3.ldstatic.com/original/4X/8/d/2/8d29b57167a512e34dcf011a187089a2d93dc21f.jpeg

能看隔壁论坛图床还是不错的

所以现在是又不审核了还是怎么样？短的不审核吗？🤔

@刘协 #2 默默给你点了个赞，并投币1积分。
好看 点了

这站长为啥要自己手搓一个？现成的富文本编辑器js库我能找到十几种好用的

@ㅤㅤㅤㅤㅤㅤ #7 没话说，反正有了就用着吧

能看图对我们来说就是唯一重要的了，过去几天没有md大家不照样活跃

@ㅤㅤㅤㅤㅤㅤ #7 token太多了

隐藏文本测试
[details="总结"]
此文本将被隐藏
[/details]
不支持

代码块效果测试

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#fff0f5">
  <meta name="description" content="星缘酱的女生女装系列作品传送站">
  <title>星女装•原生态女装传送站</title>
  <style>
    @import url('https://cdn.jsdelivr.net/npm/@fontsource/zcool-kuaile@5.2.5/index.css');

    :root {
      --bg-gradient: linear-gradient(135deg, #fff7fa, #ffe4ec, #ffd4e1, #ffe7eb, #fff7fa);
      --bg-size: 400% 400%;
      --card-bg: rgba(255, 255, 255, .53);
      --card-border: rgba(255, 255, 255, .78);
      --hero-border: rgba(255, 120, 169, .58);
      --card-shadow: 0 14px 40px rgba(207, 83, 132, .12);
      --hero-shadow: 0 18px 55px rgba(226, 95, 148, .17), inset 0 0 0 1px rgba(255,255,255,.58);
      --text-main: #5a3e48;
      --text-sub: #856a75;
      --accent: #e95c96;
      --gold-gradient: linear-gradient(135deg, #ff8eaa, #f2a3dc);
      --gold-shadow: 0 5px 15px rgba(233, 92, 150, .24);
      --tag-bg: rgba(255, 235, 241, .72);
      --tag-border: rgba(245, 151, 184, .43);
      --tag-text: #9a5871;
      --toggle-bg: rgba(255, 255, 255, .66);
    }

    [data-theme="warm-night"] {
      --bg-gradient: linear-gradient(135deg, #1c1b1f, #2a282d, #1c1b1f);
      --card-bg: rgba(255,255,255,.08);
      --card-border: rgba(255,255,255,.13);
      --hero-border: rgba(217,168,154,.46);
      --card-shadow: 0 12px 38px rgba(0,0,0,.3);
      --hero-shadow: 0 18px 52px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.07);
      --text-main: #e6e1e5;
      --text-sub: #b9adb3;
      --accent: #e7b4a4;
      --gold-gradient: linear-gradient(135deg, #c98d7c, #dcb7ad);
      --gold-shadow: 0 5px 15px rgba(217,168,154,.2);
      --tag-bg: rgba(255,255,255,.06);
      --tag-border: rgba(255,255,255,.15);
      --tag-text: #d9a89a;
      --toggle-bg: rgba(0,0,0,.3);
    }

    [data-theme="extreme-dark"] {
      --bg-gradient: linear-gradient(135deg, #101010, #181818, #101010);
      --card-bg: rgba(255,255,255,.045);
      --card-border: rgba(255,255,255,.08);
      --hero-border: rgba(184,122,122,.34);
      --card-shadow: 0 12px 38px rgba(0,0,0,.5);
      --hero-shadow: 0 18px 52px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.04);
      --text-main: #d0cbcd;
      --text-sub: #8d8589;
      --accent: #c88d9c;
      --gold-gradient: linear-gradient(135deg, #a96778, #bc8b9a);
      --gold-shadow: 0 5px 13px rgba(184,122,122,.15);
      --tag-bg: rgba(255,255,255,.035);
      --tag-border: rgba(255,255,255,.1);
      --tag-text: #bd8993;
      --toggle-bg: rgba(255,255,255,.05);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      padding: clamp(24px, 5vw, 64px) max(18px, env(safe-area-inset-left));
      overflow-x: hidden;
      color: var(--text-main);
      background: var(--bg-gradient);
      background-size: var(--bg-size);
      animation: gradientFlow 16s ease infinite;
      font-family: "ZCOOL KuaiLe", "站酷快乐体", "Microsoft YaHei", sans-serif;
      transition: background .5s ease, color .5s ease;
    }
    button { font: inherit; }
    @keyframes gradientFlow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

    .page-shell { width: min(1200px, 100%); margin: 0 auto; }
    .site-title {
      margin: 2px auto clamp(22px, 4vw, 34px);
      text-align: center;
      font-family: "STKaiti", "KaiTi", "Songti SC", Georgia, serif;
      font-size: clamp(30px, 7vw, 58px);
      font-weight: 900;
      line-height: 1.16;
      letter-spacing: clamp(1px, .35vw, 4px);
      color: transparent;
      background: linear-gradient(110deg, #d84d8d, #ff86a6 42%, #ae6fc2 85%);
      -webkit-background-clip: text;
      background-clip: text;
      filter: drop-shadow(0 5px 13px rgba(206, 72, 132, .2));
    }

    .hero {
      position: relative;
      width: min(880px, 100%);
      margin: 0 auto clamp(32px, 6vw, 64px);
      padding: clamp(25px, 4.5vw, 42px);
      overflow: hidden;
      border: 2px solid var(--hero-border);
      border-radius: clamp(22px, 4vw, 30px);
      outline: 1px solid rgba(255,255,255,.48);
      outline-offset: -7px;
      background: var(--card-bg);
      box-shadow: var(--hero-shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      cursor: pointer;
      transition: max-height .48s cubic-bezier(.2,.8,.2,1), padding .4s ease, box-shadow .3s ease, transform .3s ease;
      max-height: 1050px;
    }
    .hero:hover { transform: translateY(-2px); box-shadow: 0 22px 65px rgba(226,95,148,.22), inset 0 0 0 1px rgba(255,255,255,.58); }
    .hero.is-guided { animation: heroGuide 1.65s ease-in-out infinite; }
    @keyframes heroGuide { 0%,100% { border-color: var(--hero-border); box-shadow: var(--hero-shadow); } 50% { border-color: var(--accent); box-shadow: 0 0 0 7px rgba(233,92,150,.12), 0 18px 58px rgba(226,95,148,.28); } }
    .hero:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
    .hero::before, .hero::after { content: "✦"; position: absolute; color: var(--accent); opacity: .42; font-size: 22px; }
    .hero::before { top: 13px; left: 18px; }
    .hero::after { right: 18px; bottom: 13px; }
    .hero-kicker { margin-bottom: 12px; text-align: center; color: var(--accent); font-size: clamp(13px, 2.6vw, 16px); }
    .hero-content { color: var(--text-sub); font-size: clamp(15px, 2.5vw, 17px); line-height: 1.68; text-align: left; }
    .hero-line { display: block; }
    .hero-donation { margin-top: 8px; color: var(--text-main); }
    .text-link { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
    .hero-collapsed-copy { display: none; color: var(--text-main); text-align: center; font-size: clamp(14px, 2.8vw, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hero.is-collapsed { max-height: 58px; padding: 16px 48px; }
    .hero.is-collapsed .hero-kicker, .hero.is-collapsed .hero-content { display: none; }
    .hero.is-collapsed .hero-collapsed-copy { display: block; }

    .cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 3vw, 30px); }
    .card {
      position: relative;
      min-height: 228px;
      padding: clamp(24px, 3vw, 31px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid var(--card-border);
      border-radius: 22px;
      background: var(--card-bg);
      box-shadow: var(--card-shadow);
      backdrop-filter: blur(13px);
      -webkit-backdrop-filter: blur(13px);
      cursor: pointer;
      transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;
    }
    .card::after { content: ""; position: absolute; inset: 0; left: -120%; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.24), transparent 70%); transition: left .65s ease; pointer-events: none; }
    .card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 17px 46px rgba(226, 92, 148, .2); }
    .card:hover::after { left: 120%; }
    .card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
    .roman { position: absolute; top: 19px; right: 21px; color: var(--accent); opacity: .72; font-family: Georgia, serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
    .gold-tag { display: inline-block; max-width: calc(100% - 44px); margin-bottom: 14px; padding: 7px 14px; border-radius: 12px; color: #fff; background: var(--gold-gradient); box-shadow: var(--gold-shadow); font-size: clamp(16px, 3vw, 20px); letter-spacing: .5px; }
    .card-title { margin-bottom: 21px; color: var(--text-main); font-size: clamp(15px, 2.6vw, 18px); line-height: 1.58; overflow-wrap: anywhere; }
    .tags-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
    .tag { padding: 5px 10px; border: 1px solid var(--tag-border); border-radius: 9px; color: var(--tag-text); background: var(--tag-bg); font-size: 12px; }

    .floating-controls { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 100; display: flex; align-items: center; gap: 9px; }
    .theme-toggle { display: flex; gap: 10px; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 30px; background: var(--toggle-bg); box-shadow: 0 4px 18px rgba(0,0,0,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    .theme-dot { width: 21px; height: 21px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: transform .25s ease; }
    .theme-dot:hover { transform: scale(1.18); }
    .theme-dot.active { border-color: var(--text-main); transform: scale(1.08); }
    .dot-pink { background: linear-gradient(135deg, #fff0f5, #ff9fba); }
    .dot-warm { background: #2a282d; }
    .dot-dark { background: #0c0c0c; }
    .sky-button { width: 45px; height: 45px; border: 1px solid var(--card-border); border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ff86b7, #b576d1); box-shadow: 0 5px 20px rgba(207,83,158,.3); cursor: pointer; font-size: 21px; transition: transform .25s ease, box-shadow .25s ease; }
    .sky-button:hover { transform: translateY(-3px) rotate(8deg); box-shadow: 0 8px 27px rgba(207,83,158,.42); }
    .tip-dialog { width: min(560px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 32px)); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--hero-border); border-radius: 27px; color: var(--text-main); background: var(--card-bg); box-shadow: 0 25px 90px rgba(82,34,65,.4); backdrop-filter: blur(24

@laobaile #12 欣欣姐是妈妈

@aierkuite #13 因为【好评】给你点个赞，并投币1积分。

@StellaFortuna林可欣 #12 什么鬼？代码块不会自动折叠
也根本不能折叠

这个是我的女装网站源码 没什么用
另外也不支持一键复制，这都啥呀？

又可以看图了😋

@StellaFortuna林可欣 #13 而且还发现一个问题，字数限制依然存在，这个代码不完整

X-RateLimit-Limit: 20
X-Quota-Free-Remaining: 37
X-Quota-Paid-Remaining: 120

完整的代码块儿也没用

cloudflare 是好的

是测试区捏ww

@StellaFortuna林可欣 #楼主 因为【是星缘喵w】给你点个赞，并投币1积分。

@StellaFortuna林可欣 #18 ww

所以腿呢，没有腿我还看什么啊😡

有多开放~

@StellaFortuna林可欣 #6 支持喵支持～

@StellaFortuna林可欣 你是真星缘还是假星缘？如果是真的，我要给你生猴子，续上个站没续上的缘分~