javascript - Kendo编辑器+ AngularJS imageBrowser和fileBrowser

谁能告诉我如何使用angular js将imageBrowser和fileBrowser添加到Kendo Editor？

当前使用的jQuery实现是：

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

我已经使用AngularJS实现了，但是我不明白如何将imageBrowser和File Browser添加到此控件？

<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>

最佳答案

这是为我工作的解决方案。

全局应用程序BasePath-在Layout.cshtml头部分

<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控制器-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 Editor的控制器

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 Editor的控制器

   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);
            }
        }

    }

关于javascript - Kendo编辑器+ AngularJS imageBrowser和fileBrowser，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33254616/