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

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”。以下是让它发挥作用的方法:

方法一

<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