Site Notice

hello, world

InPageEdit-v2

From Project-EPB Commons
Revision as of 19:27, 8 December 2019 by 机智的小鱼君 (talk | contribs) ([InPageEdit] 没有编辑摘要)
五彩斑斓のInPageEdit工具盒

InPageEdit是由机智的小鱼君使用JavaScript编写的MediaWiki插件。具有较好的移动设备支持以及毫无卵用的五彩斑斓设计。主要功能旨在使许多MediaWiki的功能在不打开新标签页的情况下完成(包括但不限于编辑),极大加快维护wiki的速度。另外插件采用模块化设计,提供许多API可以自由调用,详见/API

特色功能

InPageEdit工具盒

  • 在成功加载InPageEdit-v2后,屏幕的右下角应当出现如图所示的InPageEdit工具盒
  • 插件的所有功能均可以在工具盒中找到

快速编辑

<html><button class="hide-for-guide" onclick="InPageEdit.edit({page:'InPageEdit-v2'})">体验一下快速编辑?</button></html>

编辑

  • 点击工具箱中天蓝色的“edit 铅笔图标”,在不打开新标签页的情况下编辑页面
  • 编辑器提供预览功能
  • 也可以编辑页面的历史版本以便快速修复
  • 注意,您不应将本插件作为MediaWiki原生编辑页面的完全替代品,本插件与原生编辑页面相比少了很多实用的工具(模版使用分析、高级编辑工具条等等),而且稳定性一定低于原生编辑页面,本插件更适合进行修复页面内简单问题的小编辑

快速编辑段落

  • 在段落编辑按钮后生成一个快速编辑按钮,让你快速编辑这个段落

快速编辑其他页面

可以通过Navbar快速修改Navbox模版而无需离开当前页面
  • 插件自动识别文章内的编辑链接,例如Navbox内的“查编论”快捷方式以及模版内的编辑链接,在其后生成一个快速编辑按钮,让你不需要打开新页面也能修改非当前页面的页面

快速重定向

IPE redirect.png
  • 点击工具箱中黄橙色的“flight_land 飞机降落图标”,可以快速将某个页面重定向到本页面
  • 点击工具箱中玫瑰色的“flight_takeoff 飞机起飞图标”,可以快速将本页面重定向到某个页面

快速重命名

IPE rename.png
  • 点击工具盒中紫色的“光标图标format_italic”,在不打开新标签页的情况下重命名本页面(移动本页面)

快速删除页面

  • 暂未实装

快速预览差异

IPE diff.png

<html><button class="hide-for-guide" onclick="InPageEdit.quickDiff({fromtitle:'InPageEdit-v2',torelative:'prev'})">体验一下比较差异?</button></html>

  • 在访问最近更改或者差异页面时,点击差异链接可以在不打开新页面的情况下快速阅览差异

如何安装

个人使用

在您的个人js页(User:你的用户名/common.js)添加以下代码:

mw.loader.load('https://common.wjghj.cn/js/InPageEdit-v2');

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
  • Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。

自定义功能

InPageEdit采用模块化设计,你可以自由调用IPE提供的几乎所有功能

详见:/API#示例

尝试一下

想尝试一下本插件吗?InPageEdit预设在本页面运行,尽管点击InPageEdit的相关按钮,进行尝试吧!不用担心破坏任何东西,你的编辑操作一定会失败,这是因为本wiki不允许匿名用户编辑。

<html><button onclick="InPageEdit.edit({page:'InPageEdit-v2'})">快速编辑?</button> <button onclick="InPageEdit.quickDiff({fromtitle:'InPageEdit-v2',torelative:'prev'})">对比差异?</button> <button><a href="https://common.wjghj.cn/wiki/InPageEdit-v2?action=history" style="color:#252525">还想在历史页面快速对比页面历史版本间的差异?</a></button></html>

卸载插件

自动卸载

点击ipe工具盒中的红色齿轮,选择卸载,按照提示操作即可

手动删除个人js

删除您的个人js页(User:你的用户名/common.js)中的以下代码:

mw.loader.load('https://common.wjghj.cn/js/InPageEdit-v2');

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
  • Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。

手动清理残余项

本插件安装时会保存LocalStorage,删除方法如下:

  • Firefox:打开您的浏览器控制台(F12) → 存储(Shift+F9),找到本地存储,删除键值InPageEditPreference以及InPageEditVersion,右键→删除本项目
  • Chrome:打开您的浏览器“检查”控制台(F12) → Application → v找到'LocalStorge → 选中InPageEditPreference以及InPageEditVersion两个Key → 右键点击Delete

技术细节

插件使用

  • 使用jQuery
  • 使用mediawiki.api
  • 使用localStorage
  • 模态框使用ssi-modal插件
  • 使用超级无敌螺旋炫酷吊炸天AJAX异步加载法

样式设计

  • 外观样式参考OOUI,通过CSS进行的还原

支持平台

<html><style>

 table.browsersupport td {
   text-align: center;
 }
 table.browsersupport td {
   width: 20%;
 }
 table.browsersupport th {
   color: #333333;
   font-weight: 400;
 }
 table.browsersupport {
   width: 100%;
 }
 table.browsersupport .bsIE {
   background-image: url('https://www.w3school.com.cn/ui2017/compatible_ie.png');
 }
 table.browsersupport .bsFirefox {
   background-image: url('https://www.w3school.com.cn/ui2017/compatible_firefox.png');
 }
 table.browsersupport .bsChrome {
   background-image: url('https://www.w3school.com.cn/ui2017/compatible_chrome.png');
 }
 table.browsersupport .bsSafari {
   background-image: url('https://www.w3school.com.cn/ui2017/compatible_safari.png');
 }
 table.browsersupport .bsOpera {
   background-image: url('https://www.w3school.com.cn/ui2017/compatible_opera.png');
 }
 table.browsersupport .bsNoIE {
   background-image: url('https://www.w3school.com.cn/ui2017/incompatible_ie.png');
 }
 table.browsersupport .bsNoFirefox {
   background-image: url('https://www.w3school.com.cn/ui2017/incompatible_firefox.png');
 }
 table.browsersupport .bsNoChrome {
   background-image: url('https://www.w3school.com.cn/ui2017/incompatible_chrome.png');
 }
 table.browsersupport .bsNoSafari {
   background-image: url('https://www.w3school.com.cn/ui2017/incompatible_safari.png');
 }
 table.browsersupport .bsNoOpera {
   background-image: url('https://www.w3school.com.cn/ui2017/incompatible_opera.png');
 }
 table.browsersupport .bsPreIE {
   background-image: url('https://www.w3school.com.cn/i/precompatible_ie.gif');
 }
 table.browsersupport .bsPreFirefox {
   background-image: url('https://www.w3school.com.cn/i/precompatible_firefox.gif');
 }
 table.browsersupport .bsPreChrome {
   background-image: url('https://www.w3school.com.cn/i/precompatible_chrome.gif');
 }
 table.browsersupport .bsPreSafari {
   background-image: url('https://www.w3school.com.cn/i/precompatible_safari.gif');
 }
 table.browsersupport .bsPreOpera {
   background-image: url('https://www.w3school.com.cn/i/precompatible_opera.gif');
 }
 table.browsersupport {
   margin-top: 15px;
   border-collapse: collapse;
 }
 table.browsersupport td {
   padding: 0;
   height: 86px;
   width: 86px;
   vertical-align: middle;
   background: #fdfcf8 no-repeat center;
   border: 1px solid #ddd;
 }
 table.browsersupport .browser_version td {
   padding: 0;
   height: 36px;
   vertical-align: middle;
   text-align: center;
   background-color: #F5F5F5;
   border: 1px solid #ddd;
 }
 table.browsersupport td.bsProperty {
   font-family: courier new;
   white-space: nowrap;
   width: 20%;
 }
 table.browsersupport th {
   padding: 0;
   height: 36px;
   vertical-align: middle;
   text-align: center;
   background-color: #F5F5F5;
   border: 1px solid #ddd;
 }
 table.browsersupport .browsericons {
   color: #000;
   text-shadow: 1px 1px 0px white;
   font-weight: bold;
 }

</style> <table class="dataintable browsersupport">

 <tbody><tr>
     <th>IE</th>
     <th>Firefox</th>
     <th>Chrome</th>
     <th>Safari</th>
     <th>Opera</th>
 </tr>
 <tr class="browsericons">
     <td class="bsNoIE">不支持IE浏览器</td>						
     <td class="bsFirefox">最新2个版本</td>
     <td class="bsChrome">最新2个版本</td>
     <td class="bsSafari">最新2个版本</td>				
     <td class="bsOpera">最新2个版本</td>				
 </tr>

</tbody></table> </html>

  • MediaWiki > 1.19.0
  • jQuery > 2.2.0
  • 由于Fandom平台使用的是jQuery1.8.1👎👎👎,在UCP升级(Unified Community Platform Update)前暂不考虑支持

更新日志

详见 /version-info

源代码

JavaScript
CSS

你知道吗

  • 本插件最初是受到萌娘百科用户妹空酱所编写的小编辑插件WikiPlus的启发
    • 由于WikiPlus对于移动设备糟糕的兼容性(在较小的手机上编辑框飞出屏幕)以及难看的绿色配色,加之其不支持Fandom/Wikia平台,机智的小鱼君决定自行编写一款小编辑插件
    • 本插件的最初目的是填补WikiPlus不兼容Fandom平台的遗憾
    • 遗憾而戏剧性的一幕是,本插件也不兼容Fandom😂
  • 虽然插件名字叫“页面内编辑(In page edit)”,但事实上IPE提供了比W+更多的编辑以外的额外功能,例如快速比较差异、快速重命名页面等等
  • 期初本插件的设计参考的是Fandom Design System,但后来改用类OOUI的设计风格,即便如此,本插件并未直接调用OOUI-JS,而是作者通过css进行的还原,源代码可以在上面的列表找到

InPageEdit-v2 is a MediaWiki plugin based on JavaScript. And write by 机智的小鱼君.
© Original by Wjghj Project, GNU General Public License 3.0 (2019- )
See more: Plugin page Version info Contact author