剑道编辑器：如何在剑道编辑器中插入图像？
Posted
技术标签:
【中文标题】剑道编辑器：如何在剑道编辑器中插入图像？【英文标题】：Kendo-editor: How to insert image in kendo editor? 【发布时间】：2016-11-24 20:45:49 【问题描述】：如何将Image从本地机器插入Kendo Editor？我无法执行此操作。
【问题讨论】：
【参考方案1】：您应该在Kendo-Editor 中使用image-Browser，默认情况下Kendo-Editor 存储插入图像的链接，在您的情况下，您从本地机器上传图像。
您必须创建自定义控制器才能将图像上传到服务器并返回图像链接。
我已经提到了下面的代码，希望这段代码对你有用。
创建名称为ImageBrowser的控制器
public class ImageBrowserController : Controller
private const string contentFolderRoot = "~/";
private const string prettyName = "ServerPathForImage/";
private const string DefaultFilter = "*.png,*.gif,*.jpg,*.jpeg";
private const int ThumbnailHeight = 80;
private const int ThumbnailWidth = 80;
private readonly DirectoryBrowser directoryBrowser;
private readonly ThumbnailCreator thumbnailCreator;
public ImageBrowserController()
directoryBrowser = new DirectoryBrowser();
thumbnailCreator = new ThumbnailCreator();
public string ContentPath
get
return Path.Combine(contentFolderRoot, prettyName);
private string ToAbsolute(string virtualPath)
return VirtualPathUtility.ToAbsolute(virtualPath);
private string CombinePaths(string basePath, string relativePath)
return VirtualPathUtility.Combine(VirtualPathUtility.AppendTrailingSlash(basePath), relativePath);
public virtual bool AuthorizeRead(string path)
return CanAccess(path);
protected virtual bool CanAccess(string path)
return path.StartsWith(ToAbsolute(ContentPath), StringComparison.OrdinalIgnoreCase);
private string NormalizePath(string path)
if (string.IsNullOrEmpty(path))
return ToAbsolute(ContentPath);
return CombinePaths(ToAbsolute(ContentPath), path);
public virtual JsonResult Read(string path)
path = NormalizePath(path);
if (AuthorizeRead(path))
try
directoryBrowser.Server = Server;
var result = directoryBrowser
.GetContent(path, DefaultFilter)
.Select(f => new
name = f.Name,
type = f.Type == EntryType.File ? "f" : "d",
size = f.Size
);
return Json(result, JsonRequestBehavior.AllowGet);
catch (DirectoryNotFoundException)
throw new HttpException(404, "File Not Found");
throw new HttpException(403, "Forbidden");
public virtual bool AuthorizeThumbnail(string path)
return CanAccess(path);
[OutputCache(Duration = 3600, VaryByParam = "path")]
public virtual ActionResult Thumbnail(string path)
path = NormalizePath(path);
if (AuthorizeThumbnail(path))
var physicalPath = Server.MapPath(path);
if (System.IO.File.Exists(physicalPath))
Response.AddFileDependency(physicalPath);
return CreateThumbnail(physicalPath);
else
throw new HttpException(404, "File Not Found");
else
throw new HttpException(403, "Forbidden");
private FileContentResult CreateThumbnail(string physicalPath)
using (var fileStream = System.IO.File.OpenRead(physicalPath))
var desiredSize = new ImageSize
Width = ThumbnailWidth,
Height = ThumbnailHeight
;
const string contentType = "image/png";
return File(thumbnailCreator.Create(fileStream, desiredSize, contentType), contentType);
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult Destroy(string path, string name, string type)
path = NormalizePath(path);
if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(type))
path = CombinePaths(path, name);
if (type.ToLowerInvariant() == "f")
DeleteFile(path);
else
DeleteDirectory(path);
return Json(null);
throw new HttpException(404, "File Not Found");
public virtual bool AuthorizeDeleteFile(string path)
return CanAccess(path);
public virtual bool AuthorizeDeleteDirectory(string path)
return CanAccess(path);
protected virtual void DeleteFile(string path)
if (!AuthorizeDeleteFile(path))
throw new HttpException(403, "Forbidden");
var physicalPath = Server.MapPath(path);
if (System.IO.File.Exists(physicalPath))
System.IO.File.Delete(physicalPath);
protected virtual void DeleteDirectory(string path)
if (!AuthorizeDeleteDirectory(path))
throw new HttpException(403, "Forbidden");
var physicalPath = Server.MapPath(path);
if (Directory.Exists(physicalPath))
Directory.Delete(physicalPath, true);
public virtual bool AuthorizeCreateDirectory(string path, string name)
return CanAccess(path);
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult Create(string path, FileBrowserEntry entry)
path = NormalizePath(path);
var name = entry.Name;
if (!string.IsNullOrEmpty(name) && AuthorizeCreateDirectory(path, name))
var physicalPath = Path.Combine(Server.MapPath(path), name);
if (!Directory.Exists(physicalPath))
Directory.CreateDirectory(physicalPath);
return Json(null);
throw new HttpException(403, "Forbidden");
public virtual bool AuthorizeUpload(string path, HttpPostedFileBase file)
return CanAccess(path) && IsValidFile(file.FileName);
private bool IsValidFile(string fileName)
var extension = Path.GetExtension(fileName);
var allowedExtensions = DefaultFilter.Split(',');
return allowedExtensions.Any(e => e.EndsWith(extension, StringComparison.InvariantCultureIgnoreCase));
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult Upload(string path, HttpPostedFileBase file)
path = NormalizePath(path);
var fileName = Path.GetFileName(file.FileName);
if (AuthorizeUpload(path, file))
file.SaveAs(Path.Combine(Server.MapPath(path), fileName));
return Json(new
size = file.ContentLength,
name = fileName,
type = "f"
, "text/plain");
throw new HttpException(403, "Forbidden");
[OutputCache(Duration = 360, VaryByParam = "path")]
public ActionResult Image(string path)
path = NormalizePath(path);
if (AuthorizeImage(path))
var physicalPath = Server.MapPath(path);
if (System.IO.File.Exists(physicalPath))
const string contentType = "image/png";
return File(System.IO.File.OpenRead(physicalPath), contentType);
throw new HttpException(403, "Forbidden");
public virtual bool AuthorizeImage(string path)
return CanAccess(path) && IsValidFile(Path.GetExtension(path));
在view你需要创建text-area
<textarea class="classicEditor" name="Contents" id="classicEditor"></textarea>
现在您需要在javascript 中绑定kendo-editor 和text-area
<script type="text/javascript">
$(document).ready(function ()
$("#classicEditor").kendoEditor(
imageBrowser:
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: "/ImageBrowser/Image?path=0"
,
tools: [
"bold",
"italic",
"underline",
"strikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
"VerticalAlignTop",
"Vertical-AlignTop",
"Verticaltop",
"insertUnorderedList",
"insertOrderedList",
"indent",
"outdent",
"insertImage",
"subscript",
"superscript",
"createTable",
"addRowAbove",
"addRowBelow",
"addColumnLeft",
"addColumnRight",
"deleteRow",
"deleteColumn",
"viewhtml",
"formatting",
"cleanFormatting",
"fontName",
"fontSize",
"foreColor",
"backColor",
"print"
]
);
)
</script>
如果你遇到image-browser的布局问题，你需要借助下面的代码来解决。
<style>
.k-window
width: 430px !important;
.k-imagebrowser
margin-left: 25px !important;
</style>
【讨论】：
谢谢，这很有帮助。它几乎解决了我的问题。【参考方案2】：您应该使用文件和图像浏览器，它可以让您将图像上传到服务器然后使用它们。如此处所述：http://demos.telerik.com/kendo-ui/editor/imagebrowser
【讨论】：
以上是关于剑道编辑器：如何在剑道编辑器中插入图像？的主要内容，如果未能解决你的问题，请参考以下文章