像编辑word一样写SCP

模块暂不可用: 此动态功能尚未由只读迁移站支持。

隐藏Saving Pages显示Saving Pages

WikiJump include 未展开: 本地数据库中没有引用的站点(:oxygennine:peroxide:layout-header-center)

WikiJump include 未展开: 本地数据库中没有引用的站点(:oxygennine:peroxide:palette-dark)

Rating: +101

前言:
Wikidot的维基语法极为繁琐和不规范,为了降低创作/翻译的门槛,提升操作手感、本地离线保存等,我做了这个编辑器。

这个编辑器无法支持很多专业化的维基语法,也不能通过数据包完整支持include/Module CSS等用于wikidot页面内的布局调整的所见即所得编辑,如果想使用并发布你的作品,请先在沙盒调整。

下载: 下载最新版?
仓库:查看README或代码?

Windows/LinuxmacOS

施工中/如果你遇到了欢迎issues或者讨论区@wasd243wasd243


关于[[span]]:

span虽然Insert栏支持,但是有很多限制:

  1. 用户的span不能换行存在;
  2. 不能使用span导出颜色,编辑器使用十六进制输入或使用编辑器内自带的颜色模式3才可以导出颜色,所有颜色字导出均为正文的格式,不会导出span

注:原先的“一键插入CSS代码”本质上是一个自动写入代码的脚本,新版本尚未稳定,所以我给砍了,带有变量的include本质上算是一种类似宏展开的东西,无法逆向(除非你硬编码一些meta-data)所以数据包的方法只能做那种实时预览的东西,做不了完整WYSIWYG,故弃用。

支持Windows4 macOS5 Linux6

下面这个是可编辑的一个DEMO,缺失了很多功能,因为后端没做WASM,加载不出来的话可能是您所在的网络环境无法连接到github,不过这个APP是全本地的,除非你在CSS里 @import,不然基本上和网络没有关系

v1.0.0-v2.1.0 部分已归档,详见:沙盒里的这个页面

SCP-WYSIWYG v3.0.0部分采用了类似Word的UI,以便用户更好上手操作,砍掉了一些无法完整在编辑器内所见即所得的功能如版式/include组件等,在图片/module rate部分增加了拖动调整大小缩放/位置功能优化编辑手感7

换行部分基于TipTap的插件增加了换行标记符功能,换行标记仅显示在段落结束处8


接下来是一些常见的功能按钮和使用方法介绍:

表格

点击Home的格子即可插入表格,生成是采用双竖线的||表格生成,暂不支持生成[[table]],所有的表格操作都在右键菜单,右键点击表格即可。

右键菜单名称ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ实际操作 ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
Add column增加列
Add Row增加行9
Delete column删除光标所在的列
Delete row删除光标所在行

Table's Context Menu

表格在编辑器内的渲染

+折叠块-折叠块

同理,折叠块也可以在编辑器中生成,在折叠块内容左侧加上了一条灰线提醒用户折叠块内容。

鉴于wikitext中折叠块采用了[[collapsible show= hide]]的结构,所以普通的TipTap插件无法对应处理,所以请用户在为这折叠块添加内容summary的时候,写上+号和-号,生成器会自动根据+-号匹配show和hide的值

collapsible-in-editor

折叠块在编辑器内的渲染

Tabview

Tabview的操作同样也放在右键菜单删除一个Tab
右键菜单名称ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ功能ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
Add Tab在当前tab右侧添加一个Tab
Delete Tabview删除整个TabView

清理样式与插入链接/相对链接

点击Home栏中的🧹图标即可清理光标当前的样式10与被选中的样式。

如果想要在对应文本添加链接,选中后点击Home栏中的🔗图标即可,🔗旁边标注了Site的部分为站点链接如:[[[SCP-173]]],插入方法同理。

自定义CSS与div

在Insert栏中,点击CSS图标即可打开CSS插入模式11,div同理。

css-and-div

编辑器中的自定义CSS面板

Module Rate与图片

对齐时直接拖拽就行了,左中右拖拽会自动到最近的位置上,已知的一些问题如下:

  1. 当尝试为普通图片块设置文字环绕时,会自动fallback回没有任何对齐的image块;
  2. 由于ProseMirror的奇怪选中机制,鼠标选中image-block的caption面板时容易直接选中到图片本体,造成误删;
  3. 第一次插入image-block会出现caption的内容丢失的问题;

保存与自动保存

右上角的Save以.ftml文件保存到你想要的位置,Open部分也可以打开任意位置的.ftml文件。

自动保存状态与配置

点击Settings进入autosave配置栏,可自行设定autosave的保存间隔时间与保存路径,旁边的Developer部分为调试时输出ProseMirror JSON,目前由于一些打包的路径配置问题,暂不可用。

save-and-auto-save

自动保存配置界面

脚注

编辑脚注时点一下脚注号码即可打开脚注编辑器,如图:

footnote-edit

编辑脚注

Footnotes
  1. 1.卡到10帧以下的那种
  2. 2.如果有什么Tauri优化包推荐的@我,非常感谢:)
  3. 3.那个红色的A
  4. 4.GitHub Release: .exe
  5. 5.GitHub Release: .dmg
  6. 6.GitHub Release: AppImage
  7. 7.目前仅支持横向拖动,受限于wikidot的支持,图片居中时不支持文字环绕。
  8. 8.插入图片会导致图片所在位置出现一个换行符,如果你觉得难看可以在Settings里把换行符渲染关掉
  9. 9.在光标下方
  10. 10.包括链接
  11. 11.不保证完整支持wikidot的所有CSS,仅能插入自定义样式
页面版本:⁨0⁩, 最后编辑于: ⁨2026/2/26 12:31:37⁩ (⁨⁨202⁩ 日前⁩), 现时评分: 101