跳转至

插件下载

插件下载

Popup Upload Plugin(PUP)是一个小插件,允许使用Chevereto作为图床的网站可以通过一个小小的JavaScript文件提供外部图像上传。自版本3.10.2起,默认情况下所有基于Chevereto的网站都启用了PUP,启用后,您的网站上的/plugin将提供说明。

PUP将用户可编辑的内容与上传按钮绑定,点击该按钮可出现图像上传对话框,并自动处理图片插入所需的代码。最终用户将体验流畅而简洁的流程而无需离开原始网站。

设备支持

无论用户设备(包括移动设备)如何,PUP都可以在Web浏览器(HTML 5)中使用。它已经过测试并且经过确认适用于Windows,Mac,Linux和Android(Chrome)。

安装

您可以将以下代码复制到目标网站的任何HTML部分,轻松地进行基本安装。当然了,您还可以在此代码的基础上添加自定义选项。

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload"></script>

注意:您需要编辑src和data-url以匹配您的Chevereto网站。

PUP在DOM上运行,因此它没有任何服务器端依赖项,可以安装在任何网站上。

自定义

所有插件的自定义都是通过添加到PUP基本代码的数据属性来处理的。例如,要使用红色调色板,代码应如下所示:

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-palette="red"></script>

这适用于所有PUP选项。格式为data-key,其中key是目标选项键,在这种情况下,palette选项被声明为数据选项板的属性值。

选项

以下是所有可用插件键选项的列表:

url Chevereto网站的URL。
palette 按钮的命名调色板或逗号分隔的颜色列表(HEX,RGB等)。使用逗号分隔的颜色列表时,系统会将每种颜色绑定到可以与自定义CSS一起使用的%n颜色索引(从%1开始)。可支持的调色板名称列表:default, clear, turquoise, green, blue, purple, darkblue,yellow, orange, red, grey, black.
auto-insert 将代码嵌入到目标可编辑内容中自动插入。默认bbcode-embed-medium。使用完整,中等或缩略图的代码将链接到图像查看器页面。使用0可禁用自动插入。支持的嵌入代码字符串: viewer-links direct-links html-embed html-embed-full html-embed-medium
html-embed-thumbnail
bbcode-embed
bbcode-embed-full
bbcode-embed-medium
bbcode-embed-thumbnail
markdown-embed
markdown-embed-full
markdown-embed-medium
markdown-embed-thumbnail
sibling Sibling CSS选择器将其作为对插入按钮的DOM节点的引用。默认情况下,该按钮将置于可编辑内的状态。定义sibling时,插件将搜索该元素,并将其用作按钮作为参考插入的。Value为css-selector
sibling-pos 相对于sibling的位置,放置按钮。Defaultafter,Valuebefore,after
vendor 对供应商字符串命名。默认为自动。支持的供应商字符串:bbpress,discourse,discuz,ipb,mybb,nodebb,phpbb,smf,vanilla,vbulletin,woltlab,xenforo
mode 插件模式。默认情况下,插件绑定到任何匹配的编辑器框。使用manual模式显式插入按钮并停止任何自动绑定。Defaultauto。Valueauto,manual
target 可编辑内容的CSS选择器。手动插入按钮时使用它。Defaultauto。Valuecss-selector
lang 用于双字母和四字母语言代码的按钮语言。默认auto。支持的语言字符串:ar,cs,de,es,fi,fr,id,it,ja,nl,pt_BR,ru,zh_CN,zh_TW
container-class 自定义按钮容器类名。它将%cClass绑定到模板堆栈。默认情况下,系统将使用chevereto-pup-container
button-class 自定义按钮类名称。它将%bClass绑定到模板堆栈。默认情况下,系统将使用chevereto-pup-button
html 按钮的自定义HTML。有关详细信息,请查看自定义HTML和CSS部分
css 插件按钮的自定义CSS。有关详细信息,请查看自定义HTML和CSS部分
fit-editor 一个布尔值,表明插件是否适合目标编辑器工具栏的按钮。Value0(禁用),1(启用)。禁用时,插件将不适合目标编辑器的按钮样式(覆盖仅对受支持的供应商有效)。
observe 点击事件上的元素的CSS选择器将触发silbing观察,然后插入按钮。对于动态生成编辑器代码的动态编辑器很有用。Valuecss-selector
observe-cache 一个布尔值,指明是否应该缓存匹配的观察元素。默认值1.值0(禁用),1(启用)。启用后,它将不在观察匹配的观察元素单击事件。如果编辑器是动态生成的并且未存储为DOM节点,则始终禁用监察缓存。
自定义HTML和CSS

PUP支持自定义模板,它包括模板占位符。模板占位符是PUP将转换为可用标记的特殊字符串。以下可用的模板占位符列表:

%x PUP按钮监视(必须用于触发按钮动作)
%cClass 容器类名
%bClass 容器类名
%iClass 图标类名
%iconSvg 以即用型SVG HTML标签的形式的矢量图标
%text 翻译按钮

对于自定义CSS,您还可以使用%n形式的调色板占位符,其中n是调色板索引,因此它绑定%1,%2,...,%n占位符。

自定义HTML可以将模板字符串指示作为选项属性来工作。在下面示例中,这是我们要使用的自定义HTML:

<a %x title='%text' class='%bClass'>%iconSvg</a>

要使用此模板,只需将data-html直接插入到插件的代码中

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-html="<a %x title='%text' class='%bClass'>%iconSvg</a>"></script>

自定义CSS与自定义HTML完全相同,但它使用data-button-css和调色板占位符(%1,%2,...,%n)。在下面示例中是我们要使用的自定义CSS:

li.%cClass .%bClass{background:%1;color:%2;text-indent:unset;border-radius:3px;position:relative}li.%cClass a.%bClass:hover{background:%3;color:%4;border-color:%5}.%cClass .%bClass svg{font-size:15px;width:1em;height:1em;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;left:50%;top:50%;fill:currentColor}

要使用此模板,只需将data-css插入到插件代码中:

<script async src="//demo.chevereto.com/sdk/pup.js" data-url="https://demo.chevereto.com/upload" data-css="li.%cClass .%bClass{background:%1;color:%2;text-indent:unset;border-radius:3px;position:relative}li.%cClass a.%bClass:hover{background:%3;color:%4;border-color:%5}.%cClass .%bClass svg{font-size:15px;width:1em;height:1em;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;left:50%;top:50%;fill:currentColor};"></script>

重要提示:对于自定义HTML和CSS,请确保在使用引号时符合正确的语法。

按钮手动绑定

如果要手动绑定按钮,只需创建自己的按钮,然后确认添加data-chevereto-pup-triggerdata-target属性。以下是手动插入按钮的示例:

<div id="editor" contenteditable></div>
<button data-chevereto-pup-trigger data-target="#editor">Custom button</button>

手动插入的按钮可以获得相同的弹出对话框功能和绑定功能。但是,手动插入的按钮不会使用任何插件选项或模板。

核心功能

该插件具有非常简洁的功能,并利用现代标准提供其核心功能。以下是PUP核心的一些特征。

原生JavaScript

PUP是用JavaScript编写的,它不需要任何外部库或服务器模块。代码量大约是18KB,gzip压缩后应该只有6KB左右。使用 Google Closure compiler编译器缩小源代码量,但不触及对象名称,因此您可以检查源代码而且轻松地理解代码。

它工作异步,因此对插入代码的位置选择并不重要,它根本不会阻止目标网站的负载。

智能负载和动态触发观察器

PUP设计用来监视DOM,直到目标关联元素可用,如果一旦发生这种情况,它将启动其进程,停止任何其他DOM节点观察。对于动态生成的编辑框,PUP有一个自由的加载选项,可以监视自定义在选择器元素上的click事件。任何对该元素的点击都会触发PUP的相关联的监视行为,并且会在找到相应元素后立即停止。这使得PUP可以在静态或动态编辑器框中工作。

由于一些动态编辑框只会出现一次,然后存储为DOM节点(XenForo),而其他动态编辑框将始终重新解析(Discourse,NodeBB),您可以设置PUP是否应该缓存察觉到的触发绑定。XenForo,Discourse和NodeBB供应商配置为察觉特定选择(observe certain selectors) ,以防止你想要了解其工作原理。

Closure

源代码都封装在JavaScript 的closure中,使内部变量无法调整。这大大避免了利用浏览器控制台漏洞或者通过DOM操作被劫持的风险。此外PUP处理的所有变量不会与目标网站上运行的任何脚本冲突。

postMessage

PUP使用 postMessage API与Chevereto网站保持活跃的通信。此外,使用此API可以安全地处理选项和嵌入的代码,限制发布的消息的来源,并且最重要的是,PUP会验证每条消息以确保不会对这些消息进行调整。PUP只会接收来自目标Chevereto网站的消息。

多个实例

PUP支持多个无限实例。您可以同时使用多个按钮,并使用GUID算法引用到所有实例的ID。

缓存模板

PUP将会缓存按钮模板,因此不会不必要地重新处理模板占位符。即使在多个实例中,也可以提供超快的性能。