Kendo-editor: How to insert image in kendo editor? - model-view-controller

Question

How to insert Image from local machine to Kendo Editor? I am unable to perform this action.

Answer 1

You should use image-Browser in Kendo-Editor, by default Kendo-Editor store link of insert image, in your case you upload image from local machine.
You must create custom controller to upload you image to server and return image link.
I have mention below code, I hope this code is usefull for you.
Create controller with name 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));
}
}
In view you need to create text-area
<textarea class="classicEditor" name="Contents" id="classicEditor"></textarea>
Now you need to bind kendo-editor with text-area in javascript
<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>
If you have facing layout problem of image-browser, you need to resolve with the help of below code.
<style>
.k-window {
width: 430px !important;
}
.k-imagebrowser {
margin-left: 25px !important;
}
</style>

Answer 2

You should use File and image browser which let's you upload images to your server and then use them. As descrbied here : http://demos.telerik.com/kendo-ui/editor/imagebrowser