Редактор Kendo + AngularJS imageBrowser & fileBrowser

Question

Может ли кто-нибудь сказать мне, как я могу добавить imageBrowser и fileBrowser в Kendo Editor, используя угловые js?

В настоящее время с помощью реализации JQuery является:

$("#editor").kendoEditor({ 
    tools: [ 
    "insertImage", 
    "insertFile" 
    ], 
    imageBrowser: { 
     transport: { 
      read: "foo", 
      create: "foo", 
      uploadUrl: "foo" 
     } 
    }, 
    fileBrowser: { 
     transport: { 
      read: "foo", 
      create: "foo", 
      uploadUrl: "foo" 
     } 
    } 
}); 

я реализовал с помощью AngularJS, но я не могу понять, как я добавлю ImageBrowser и файловый браузер для этого контроля?

<div ng-app="app" ng-controller="MyCtrl"> 
    <textarea kendo-editor 
    k-tools="[ 
    'bold', 
    'italic', 
    'undeline', 
    { 
    name: 'foreColor', 
    palette: [ '#f00', '#0f0', '#00f' ] 
    }]"> 
</textarea> 
</div> 
<script> 
    angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) { 
    }); 
</script> 

Answer 1

Вот решение, которое сработало для меня.

Global Application BasePath - В Layout.cshtml секции Head

<script> 
    var __appBasePath = 'http://localhost/myApp/'; 
</script> 

HTML

<div ng-controller="MyEditorController"> 
    <textarea kendo-editor k-ng-model="Html" k-options="{{editorOptions}}" ></textarea> 
</div> 

angularJS Controller - MyEditorController.js

 $scope.editorOptions = { 
     tools: [ 
       "bold", 
       "italic", 
       "underline", 
       "strikethrough", 
       "justifyLeft", 
       "justifyCenter", 
       "justifyRight", 
       "justifyFull", 
       "insertUnorderedList", 
       "insertOrderedList", 
       "indent", 
       "outdent", 
       "createLink", 
       "unlink", 
       "insertImage", 
       "insertFile", 
       "subscript", 
       "superscript", 
       "createTable", 
       "addRowAbove", 
       "addRowBelow", 
       "addColumnLeft", 
       "addColumnRight", 
       "deleteRow", 
       "deleteColumn", 
       "viewHtml", 
       "formatting", 
       "cleanFormatting", 
       "fontName", 
       "fontSize", 
       "foreColor", 
       "backColor", 
       "print"      
     ], 

     imageBrowser: { 
      messages: { 
       dropFilesHere: "Drop files here" 
      }, 

      transport: { 
       type: "imagebrowser-aspnetmvc", 
       read: __appBasePath + "ImageBrowser/Read", 
       destroy: { 
        url: __appBasePath + "ImageBrowser/Destroy", 
        type: "POST" 
       }, 
       create: { 
        url: __appBasePath + "ImageBrowser/Create", 
        type: "POST" 
       }, 
       uploadUrl: __appBasePath + "ImageBrowser/upload", 
       imageUrl: __appBasePath + "viewerImages/UserFiles/Images/{0}", 
       thumbnailUrl: __appBasePath + "ImageBrowser/thumbnail" 
      } 
     }, 
     fileBrowser: { 
      messages: { 
       dropFilesHere: "Drop files here" 
      }, 

      transport: { 
       type: "imagebrowser-aspnetmvc", 
       read: __appBasePath + "FileBrowser/Read", 
       destroy: { 
        url: __appBasePath + "FileBrowser/Destroy", 
        type: "POST" 
       }, 
       create: { 
        url: __appBasePath + "FileBrowser/Create", 
        type: "POST" 
       }, 
       uploadUrl: __appBasePath + "FileBrowser/upload", 
       fileUrl: __appBasePath + "FileBrowser/File?path={0}" 
      } 
     } 
    }; 

ImageBrowserController.cs - контроллер, который наследует KendoMVC EditorImageBrowserController

public class ImageBrowserController : EditorImageBrowserController 
    { 
     private const string contentFolderRoot = "~/MyImages/"; 

     private const string prettyName = "Images/"; 
     private static readonly string[] foldersToCopy = new[] { "~/MyImages/shared/" }; 


     /// <summary> 
     /// Gets the base paths from which content will be served. 
     /// </summary> 
     public override string ContentPath 
     { 
      get 
      { 
       return CreateUserFolder(); 
      } 
     } 

     private string CreateUserFolder() 
     { 
      var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName); 

      var path = Server.MapPath(virtualPath); 
      if (!Directory.Exists(path)) 
      { 
       Directory.CreateDirectory(path); 
       foreach (var sourceFolder in foldersToCopy) 
       { 
        CopyFolder(Server.MapPath(sourceFolder), path); 
       } 
      } 
      return virtualPath; 
     } 

     private void CopyFolder(string source, string destination) 
     { 
      if (!Directory.Exists(destination)) 
      { 
       Directory.CreateDirectory(destination); 
      } 

      foreach (var file in Directory.EnumerateFiles(source)) 
      { 
       var dest = Path.Combine(destination, Path.GetFileName(file)); 
       System.IO.File.Copy(file, dest); 
      } 

      foreach (var folder in Directory.EnumerateDirectories(source)) 
      { 
       var dest = Path.Combine(destination, Path.GetFileName(folder)); 
       CopyFolder(folder, dest); 
      } 
     } 
    } 

FileBrowserController.cs - контроллер, который наследует KendoMVC EditorFileBrowserController

public class FileBrowserController : EditorFileBrowserController 
    { 
     private const string contentFolderRoot = "~/viewerImages/"; 
     private const string prettyName = "Images/"; 
     private static readonly string[] foldersToCopy = new[] { "~/viewerImages/shared/" }; 


     /// <summary> 
     /// Gets the base paths from which content will be served. 
     /// </summary> 
     public override string ContentPath 
     { 
      get 
      { 
       return CreateUserFolder(); 
      } 
     } 

     /// <summary> 
     /// Gets the valid file extensions by which served files will be filtered. 
     /// </summary> 
     public override string Filter 
     { 
      get 
      { 
       return "*.txt, *.doc, *.docx, *.xls, *.xlsx, *.ppt, *.pptx, *.pdf, *.zip, *.rar, *.jpg, *.jpeg, *.gif, *.png"; 
      } 
     } 

     private string CreateUserFolder() 
     { 
      var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName); 

      var path = Server.MapPath(virtualPath); 
      if (!Directory.Exists(path)) 
      { 
       Directory.CreateDirectory(path); 
       foreach (var sourceFolder in foldersToCopy) 
       { 
        CopyFolder(Server.MapPath(sourceFolder), path); 
       } 
      } 
      return virtualPath; 
     } 

     private void CopyFolder(string source, string destination) 
     { 
      if (!Directory.Exists(destination)) 
      { 
       Directory.CreateDirectory(destination); 
      } 

      foreach (var file in Directory.EnumerateFiles(source)) 
      { 
       var dest = Path.Combine(destination, Path.GetFileName(file)); 
       System.IO.File.Copy(file, dest); 
      } 

      foreach (var folder in Directory.EnumerateDirectories(source)) 
      { 
       var dest = Path.Combine(destination, Path.GetFileName(folder)); 
       CopyFolder(folder, dest); 
      } 
     } 

    }