Web 截屏控件 · UEditor 1.4 集成演示

zyCapture × UEditor 1.4 集成演示

UEditor 1.4.3 工具栏内置「截屏」按钮(页内 UE.registerUI 注册):图片自动上传并通过 execCommand('insertHtml') 插入光标处。

使用前请先安装 zyCapture 客户端

控件已支持全平台 Windows / macOS / Linux / ARM64 / MIPS64 / LoongArch64, 浏览器端首次使用需安装对应平台的客户端或扩展,各平台安装包与浏览器扩展统一在控件包页面提供; 装好后刷新本页即可截屏。

在线演示
UEditor 1.4 已接入 zyCapture:点下方工具条的截屏按钮(或按快捷键),图片会自动插入编辑器光标处并上传到示例服务器。
zyCapture 控件实例 · UEditor 1.4截屏后自动贴入光标处
快捷键 Ctrl + Alt + Q

UEditor 自带的图片上传后端(net/controller.ashx)不在控件包内,控制台出现它的 404 属正常;本页截屏走的是 zyCapture 自己的上传接口,不受影响。

截屏能力
同一套控件,同一套调用方式;换编辑器只换集成那几行
1区域截屏拖拽框选任意区域
2全屏截屏一键截取整个屏幕
3全屏编辑截完直接标注画框
4隐藏本窗口截屏时自动隐藏当前页
5粘贴上传Ctrl+V 粘贴剪贴板图片
6自动上传上传后回填图片地址
7信创适配麒麟 / 统信 UOS 浏览器
8全平台Windows / macOS / Linux / ARM / MIPS / LoongArch
集成代码
把下面的代码贴进你的UEditor 1.4 项目即可
前端接入
<script src="/res/jquery/jquery-1.9.1.min.js"></script>
<script src="/products/scppro/demo/zyCapture/json2.min.js"></script>
<script src="/products/scppro/demo/zyCapture/skygqbox.js"></script>
<script src="/products/scppro/demo/zyCapture/scp.js"></script>   <!-- zyCapture 控件 -->// 注册工具栏按钮(index 控制插入位置)
  UE.registerUI('zycapture', function (editor, uiName) {
    editor.registerCommand(uiName, { execCommand: function () { scpMgr.Capture(); } });
    return new UE.ui.Button({
      name: uiName, title: '截屏',
      onclick: function () { editor.execCommand(uiName); }
    });
  }, 30);
</script>
上传接口约定后端只需按下面的格式返回
POST /api/upload
Request: multipart/form-data   (字段名由 FileFieldName 指定,默认 file)
Response:
{
  "state": "SUCCESS",
  "url": "https://your-cdn.com/upload/2026/09/abc.png"   // 图片地址,控件会回填到编辑器
}

// 若返回格式无法用 url 字段表达,可用控件配置项做提取:
// ImageMatch: "\"url\":\"(.+?)\""        用正则从响应文本中取地址
// ImageUrl:   "https://cdn.example.com/{url}"  在取到的地址前后拼路径
更多编辑器示例
zyCapture 已适配市面上主流的富文本编辑器,点下方任一即可看对应集成

想直接用到你的项目里?

下载完整 DEMO 包与集成文档,或申请 1 周免费 POC 试用。

💬 询价 / 申请试用