zyCapture × KindEditor 4 集成演示

<link rel="stylesheet" href="/products/scppro/kindeditor4x/themes/simple/simple.css" />
<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 控件 -->
<script src="/products/scppro/kindeditor4x/kindeditor-min.js"></script>
<script src="/products/scppro/kindeditor4x/lang/zh_CN.js"></script>

<textarea id="content1"></textarea>
<script>
  var scpMgr = zyCapture.getInstance({
    config: { PostUrl: "/api/upload", FileFieldName: "file" },
    event: { postComplete: function (url) { editor.insertHtml('<img src="' + url + '" />'); } }
  });

  // 1. 注册插件：点工具栏按钮 → 调控件截屏
  KindEditor.plugin('zycapture', function (K) {
    var self = this;
    self.clickToolbar('zycapture', function () { scpMgr.Capture(); });
  });

  // 2. 把 zycapture 放进 items 即可出现在工具栏
  var editor;
  KindEditor.ready(function (K) {
    editor = K.create('#content1', {
      items: ['source', '|', 'bold', 'italic', '|', 'zycapture', '|', 'image', 'link', '|', 'about']
    });
  });
</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}"  在取到的地址前后拼路径