Telerik Product and Version
|
Kendo UI 2014.1.416 |
|
Supported Browsers and Platforms
|
All |
|
Components/Widgets used (JS frameworks, etc.)
|
Kendo UI TreeView, Kendo UI Editor |
PROJECT DESCRIPTION
The example below demonstrates how to drag and drop images to the Kendo UI Editor. The demo uses a TreeView as an image source, however, this is not required. Any custom HTML markup can be used in combination with the Kendo UI Drag and Drop framework.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Editor - Image Drag and Drop</title>
<style>
html
{
font: 12px sans-serif;
}
html,
body
{
height: 100%;
padding: 0;
margin: 0;
}
#treeview,
#editorWrapper
{
float: left;
}
#treeview
{
width: 200px;
}
#editorWrapper
{
width: 600px;
position: relative;
}
#editorWrapper .k-loading-image
{
display: none;
}
</style>
</head>
<body>
<div>
<div id="treeview"></div>
<div id="editorWrapper">
<textarea id="editor" cols="30" rows="10"></textarea>
</div>
</div>
<script>
$(function(){
var body = $(document.body);
var editorWrapper = $("#editorWrapper");
function onDragStart(e) {
if (!e.sender.dataItem(e.sourceNode).value) {
e.preventDefault();
} else {
kendo.ui.progress(editorWrapper, true);
}
}
function onDrag(e) {
if ($(e.dropTarget).closest(editorWrapper)[0]) {
e.setStatusClass("k-add");
} else {
e.setStatusClass("k-denied");
}
}
function onDrop(e) {
if ($(e.dropTarget).closest(editorWrapper)[0]) {
e.preventDefault();
var img = '<img src="' + e.sender.dataItem(e.sourceNode).value + '" alt="image" />';
$("#editor").data("kendoEditor").exec("inserthtml", {value: img});
}
kendo.ui.progress(editorWrapper, false);
}
$("#treeview").kendoTreeView({
dataSource: {
data: [
{text: "Images", value: null, expanded: true, items: [
]}
]
},
dataTextField: "text",
dataValueField: "value",
dragAndDrop: true,
dragstart: onDragStart,
drag: onDrag,
drop: onDrop
});
$("#editor").kendoEditor({
tools: [
"insertImage"
]
});
});
</script>
</body>
</html>