Question

我有一个使用MVVM配置的Kendo Editor小部件，我正在尝试添加图像浏览器，但是点击insertImage工具会打开默认对话框（要求提供URL）而不是图库浏览器。

这是我的小部件配置：

<textarea data-role="editor"
          data-tools="['bold', 'italic', 'underline', 'strikethrough',
                       'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
                       'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent',
                       'createLink', 'unlink', 'insertImage',
                       'subscript', 'superscript',
                       'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn',
                       'viewHtml', 'print', 'separator',
                       'formatting', 'cleanFormatting',
                       'fontName', 'fontSize', 'foreColor', 'backColor']"
          data-image-browser="{
              messages: {
                  dropFilesHere: 'Drop files here'
              },
              transport: {
                  read: '@Url.Action("Read", "ImageBrowser")',
                  destroy: {
                      url: '@Url.Action("Destroy", "ImageBrowser")',
                      type: 'POST'
                  },
                  create: {
                      url: '@Url.Action("Create", "ImageBrowser")',
                      type: 'POST'
                  },
                  thumbnailUrl: '@Url.Action("Thumbnail", "ImageBrowser")',
                  uploadUrl: '@Url.Action("Upload", "ImageBrowser")',
                  imageUrl: '@Url.Action("Image", "ImageBrowser")?path={0}'
              }
          }"
          data-bind="value: currentContent, events: { change: contentChange, paste: contentPaste }"
          style="height: 450px">
</textarea>

有谁知道是否支持此配置（MVVM）或我缺少什么？控制台中没有记录JS错误，并且查看Url.Action帮助程序生成的HTML所有路径都是正确的。

Answer 1

要使传输能够识别您的'/[controller]/[Action]'电话输出的@Url.Action("ReadFiles", "FileBrowser")样式网址，您需要将type: 'imagebrowser-aspnetmvc'添加到图像浏览器传输中，并type: 'filebrowser-aspnetmvc'添加到文件浏览器传输中

此type属性未记录，可能是因为您实际上不支持对MVVM使用@Url.Action调用。但是如果使用MVC辅助函数创建编辑器，您可以看到它通过kendo添加到输出的html。

这是一个有效的MVVM编辑器，带有图像和文件浏览器示例：

<textarea id="DetailsOfChange"
      name="DetailsOfChange"
      data-role="editor"
      data-encoded="false"
      data-tools="['bold', 'bold', 'italic', 'underline', 'strikethrough', 'justifyLeft', 'justifyCenter',  'justifyRight', 'justifyFull', 'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent', 'createLink', 'unlink', 'insertImage', 'insertFile', 'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'formatting', 'cleanFormatting', 'foreColor', 'backColor']"
      data-image-browser="{
                transport: {
                    read: '@Url.Action("Read", "ImageBrowser")',
                    type: 'imagebrowser-aspnetmvc',
                    destroy: {
                        url: '@Url.Action("Destroy", "ImageBrowser")',
                        type: 'POST'
                    },
                    create: {
                        url: '@Url.Action("Create", "ImageBrowser")',
                        type: 'POST'
                    },
                    thumbnailUrl: '@Url.Action("Thumbnail", "ImageBrowser")',
                    uploadUrl: '@Url.Action("Upload", "ImageBrowser")',
                    imageUrl: '@Url.Action("Image", "ImageBrowser")?path={0}'
                }
            }"
      data-file-browser="{
                transport: {
                    read: '@Url.Action("Read", "FileBrowser")',
                    type: 'filebrowser-aspnetmvc',
                    destroy: {
                        url: '@Url.Action("Destroy", "FileBrowser")',
                        type: 'POST'
                    },
                    create: {
                        url: '@Url.Action("Create", "FileBrowser")',
                        type: 'POST'
                    },
                    uploadUrl: '@Url.Action("Upload", "FileBrowser")',
                    fileUrl: '@Url.Action("File", "FileBrowser")?path={0}'
                }
            }"
      data-bind="value:DetailsOfChange"></textarea>

使用MVVM的ImageBrowser的Kendo编辑器无法打开图像浏览器对话框

1 个答案: