Question

我试图在 Kendo UI编辑器上创建一个具有浏览文件功能的自定义按钮。

我的工具栏上有以下行：

{
 name: "Add",
 template: '<a class="k-button" id="popupbutton"   onclick=" events.toolbar_click(\'theFile\')">Command</a><input type="file" id="theFile" hidden/> ',
}

这似乎不起作用。下面的代码基本上是我要尝试的操作，但是使用 Kendo编辑器。

function performClick(elemId) {
  var elem = document.getElementById(elemId);
  if(elem && document.createEvent) {
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, false);
    elem.dispatchEvent(evt);
  }
}

 
<a href="#" onclick="performClick('theFile');">Open file dialog</a>
<input type="file" id="theFile" hidden/>

是否正在寻找帮助以使该功能一键式单击？

Answer 1

有两种方法可以执行此操作。第一个是使用自定义模板，就像您已设置一样。但是，我不确定什么是“ events.toolbar_click”。这是使它工作的方法：

方法1

<script>
          function performClick(elemId) {
              var elem = document.getElementById(elemId);
              if(elem && document.createEvent) {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, false);
                elem.dispatchEvent(evt);
              }
          }

          $(document).ready(function() {
              $("#toolbar").kendoToolBar({
                  items: [
                    { name: "Add", type: "button",
                      text: "File", template: '<a class="k-button" id="popupbutton" onclick="performClick(\'theFile\')">File Command 1</a><input type="file" id="theFile" hidden/> '} ]
              });
          });
</script>

另一种方法是使用工具栏按钮的事件处理程序。

方法2

<input type="file" id="theFile" hidden/>
<script>
          function fileClickEventHandler(){
            performClick('theFile')
          }

          function performClick(elemId) {
              var elem = document.getElementById(elemId);
              if(elem && document.createEvent) {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, false);
                elem.dispatchEvent(evt);
              }
          }

          $(document).ready(function() {
              $("#toolbar").kendoToolBar({
                  items: [
                      { type: "button", text: "File Command 2", click: fileClickEventHandler },
                  ]
              });
          });
</script>

您可以在此处看到两个示例：https://dojo.telerik.com/eLUbiXAF

如何在Kendo UI编辑器中创建浏览文件按钮

1 个答案: