2

我有一个使用 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 错误并查看生成的 HTML 来自Url.Action帮助程序的所有路径都是正确的。

4

1 回答 1

0

要使传输识别调用'/[controller]/[Action]'输出的样式 URL,@Url.Action("ReadFiles", "FileBrowser")您需要添加type: 'imagebrowser-aspnetmvc'到图像浏览器传输和type: 'filebrowser-aspnetmvc'文件浏览器传输。

type属性未记录在案,可能是因为您并不真正支持将@Url.Actioncall 与 MVVM 一起使用。但是,如果您使用 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>
于 2016-04-20T01:59:06.317 回答