模块暂不可用: 此动态功能尚未由只读迁移站支持。
隐藏Saving Pages
WikiJump include 未展开: 本地数据库中没有引用的站点(:oxygennine:peroxide:layout-header-center)
WikiJump include 未展开: 本地数据库中没有引用的站点(:oxygennine:peroxide:palette-dark)
不是批量编辑脚本!1 这只是一个数据连接脚本
关于夺舍wikidot的脚本测试稳定了以后发,如果想现在用的话可以看讨论区
请一定不要使用这个脚本批量2 编辑页面,请不要违反站规
欢迎各位来到更好的编辑,希望能给你带来更舒服的编辑体验
wasd243在此致谢:
Dr Hormress 非常感谢提醒,不然我会真去做缩进的
OxygenNine 非常感谢版式和协议使用授权
- 简易的XSS防护:全在本地处理,物理防护
本地缓存功能已删除用来防止修改硬编码字符串或者恶意html模块- 嵌套css/html高亮已实现!
4 - 实时同步:实时读取源代码内容并同步wikidot编辑、预览、保存
- 优化了图标(把我的头像放上去镇压玄学代码)
根据2022年由W Asriel管理员发布的规则:
另:今后将禁止个人用户在未经申请的情况下使用脚本批量修改页面,所有脚本操作也将使用
05-Bot或者获批的机器人号进行。也许本意是好的,但由于脚本运行起来就是大规模的页面修改,一旦出bug,后果会非常严重。
站点不允许使用脚本批量修改页面,本仓库内的油猴脚本并不是批量编辑脚本,而是一个用于替换wikidot内置编辑模块为这个高亮web版编辑器的工具
|代码折叠与复制演示|
源代码如下:
|查看源代码|
[!--- 如果你看源代码看到这里问我为啥不用type=javascript 那是因为这个版式的深色模式代码高亮配色有点阴,所有的主要代码都是白色背景也是白色 ---]
// ==UserScript==
// @name H2O2 Wikidot Editor (Universal)
// @namespace https://github.com/wasd243/SCP-Foundation-editor-web
// @version 1.1.0
// @description 等待内容填充后再注入
// @author wasd243
// @match *://*.wikidot.com/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
// 这里填入引用网页的url
var EDITOR_URL = 'https://wasd243.github.io/SCP-Foundation-editor-web/test.html';
var IFRAME_ID = 'h2o2-editor-frame';
// ── 消息同步 ──────────────────────────────────────────────
window.addEventListener('message', function (event) {
if (!event.data || event.data.type !== 'h2o2-update') return;
var ta = document.getElementById('edit-page-textarea');
if (!ta) return;
ta.value = event.data.payload;
ta.dispatchEvent(new Event('input', { bubbles: true }));
});
// ── 注入 ──────────────────────────────────────────────────
function inject(ta) {
// 已经注入过了
if (document.getElementById(IFRAME_ID)) return;
// 等待 Wikidot 填充内容(最多等 3 秒,每 100ms 检查一次)
var waited = 0;
var poller = setInterval(function () {
waited += 100;
var content = ta.value;
// 内容已填充,或者等够 3 秒强制注入
if (content.length > 0 || waited >= 3000) {
clearInterval(poller);
doInject(ta, content);
}
}, 100);
}
function doInject(ta, content) {
if (document.getElementById(IFRAME_ID)) return;
console.log('H2O2: 注入,内容长度', content.length);
ta.style.setProperty('display', 'none', 'important');
var toolbar = document.getElementById('wd-editor-toolbar-panel');
if (toolbar) toolbar.style.setProperty('display', 'none', 'important');
document.querySelectorAll('.change-textarea-size').forEach(function (el) {
el.style.setProperty('display', 'none', 'important');
});
var iframe = document.createElement('iframe');
iframe.id = IFRAME_ID;
iframe.src = EDITOR_URL;
iframe.style.cssText = 'width:100%;height:70vh;min-height:520px;border:none;border-radius:4px;display:block;margin-bottom:8px;';
ta.parentNode.insertBefore(iframe, ta);
iframe.addEventListener('load', function () {
setTimeout(function () {
try {
iframe.contentWindow.postMessage(
{ type: 'h2o2-init', payload: content }, '*'
);
} catch (e) {
console.warn('H2O2: postMessage 失败', e);
}
}, 500);
});
}
// ── 监听 textarea 出现 ────────────────────────────────────
var observer = new MutationObserver(function () {
var ta = document.getElementById('edit-page-textarea');
var iframe = document.getElementById(IFRAME_ID);
// textarea 消失:清理 iframe
if (!ta && iframe) {
console.log('H2O2: 编辑结束,清理');
iframe.remove();
return;
}
// textarea 出现且还没注入
if (ta && !iframe) {
inject(ta);
}
// textarea 存在:持续压制
if (ta) {
ta.style.setProperty('display', 'none', 'important');
}
});
observer.observe(document.documentElement, {
childList: true,
subtree: true
});
// 页面加载时检查一次(处理直接进入编辑页的情况)
var ta = document.getElementById('edit-page-textarea');
if (ta) inject(ta);
console.log('H2O2: v1.1.0 已启动');
})();这是一个很简单的线上wikidot源码编辑器,支持复杂的高亮和代码补全。
点击Code Tools可以打开下拉菜单栏,这里模仿wikidot原版制作了如加粗、斜体、下划线、删除线等等都快捷代码。
点击SYNC复制所有的wikidot源代码;
点击INIT加载演示模板
点击CLEAR清除所有内容;
输入[[即可触发自动补全,如果你想插入脚注,输入“中括号——中括号——f”即可回车插入,可以使用键盘上下键选择补全的类型,提供基础的wikidot语法补全包括但不限于:
- include模块
- div模块
- span模块
- note
- tabview
祝您拥有更好的编辑体验,我们讨论区和issues里见
本次更新功能一览|
- 将老版本基于stream的染色代码移植到了lezer
- 采用常用的浏览器配色
6 - 增加了代码折叠功能(本期重点)
- 增加了在[module]中的css代码高亮
- 增加了在html代码高亮
7
代码折叠|
很多时候当我们写了很多字或者代码后,再去找对应的内容时会被wikidot冗长的代码干扰观感,所以我增加了一个“折叠”功能,
这个折叠功能可以根据wikidot语法里的开始标签和闭合标签寻找需要折叠的部分。
[[note]]
注意⚠️:当有极端长的内容需要折叠时,该功能会受到code mirror的限制从而无法完全折叠
[[/note]]
WikiJump include 未展开: 本地数据库中没有引用的站点(:scp-jp:component:coltop-deep)
WikiJump include 未展开: 本地数据库中没有引用的站点(:scp-jp:component:colend-deep)
部分代码很影响观感,所以在这个编辑器中,你可以把它连着div一起折叠起来,点击左侧行数旁边的小箭头即可。
WikiJump include 未展开: 本地数据库中没有引用的站点(:scp-jp:component:coltop-deep)
WikiJump include 未展开: 本地数据库中没有引用的站点(:scp-jp:component:colend-deep)
WikiJump include 未展开: 本地数据库中没有引用的站点(:scp-jp:component:coltop-deep)
WikiJump include 未展开: 本地数据库中没有引用的站点(:scp-jp:component:colend-deep)
虽然折叠后的代码会变成一段…
但不影响对代码进行复制。
注意⚠️:这里可以往一个折叠块内反复塞折叠块代码,但wikidot用不了,记得使用include进行折叠块内部的折叠
点这里一键跳转到css指南
|一些作者的留言|
[[note]]
这里是wasd243
很难想象这个坑已经挖的这么大了,我在这里很感谢每一位朋友的upvote和留言,最开始我只是想做一个简单的转换脚本,没想到wikidot里的坑这么多。。。不过既然都开始了,来都来了,那我就尽力把这个编辑器项目做完。
希望各位有空来轰炸我的私信和issues,这对一个早期的开源项目非常重要,真的
如果私信没回复就是wikidot信箱坏了,可以来GitHub提交issues
这个web版编辑器主要是用来进行一些方便的线上代码高亮和补全,到时候会作为1.1.0版本单独发布,也会作为2.1.0版本放到我之前的WYSIWYG编辑器里面,
本人作为一个刚学了js二十几天的新手
祝您写作愉快,我们讨论区和issues里见!
[[/note]]
您已阅读完所有说明。
让我们开始吧
1. 求生欲拉满2. 虽然基本上不可能3. 记得反馈~4. 没有人会真的用这玩意写专业代码,在这里只是让大佬们方便看5. 目前的演示模板有bug,表格高亮不了,但是如果你输入||是可以高亮的,不影响使用6. 虽然很多时候并不能1:1复制浏览器配色,但是我尽力去做了,我在搞css这一块不是很擅长,如果有大佬愿意帮我改善配色的话,不胜感激7. 注意不要在html模块中使用硬编码字符串往里面塞一个wikidot的css module8. 好多代码主要得用ai写,不然也不会这么快









