Integrate an ImageEditor in the Editor Component
Environment
| Product | Progress® Kendo UI® Editor for jQuery |
Description
Can I integrate an ImageEditor in the Kendo UI for jQuery Editor component to edit images?
Solution
To achieve the desired scenario:
First, place the ImageEditor in a popup, for example, a Kendo UI for jQuery Window which is initially closed.
Next, define a Kendo UI for jQuery ContextMenu that opens when right-clicking an image.
Finally, open the Window containing the ImageEditor and load the image in it.
<div id="example">
<div id="dialog">
<div id="imageeditor"></div>
<div class="window-footer">
<button type="button" class="k-button">Close</button>
<button type="button" class="k-primary k-button">Save changes</button>
</div>
</div>
<ul id="menu">
<li>
Edit Image
</li>
</ul>
<div class="demo-section k-content wide">
<textarea id="editor" rows="10" cols="30" style="width:90%; height:470px" aria-label="editor">
<br />
<p style="text-align:center;">
<span style="font-family:Verdana, Geneva, sans-serif;font-size:large;"><strong>One of the Most Beautiful Islands on Earth - Tenerife</strong>
</span>
</p>
<p>
<span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;"><strong>Overview</strong>
</span>
</p>
<p style="font-size: small;">
<strong>Tenerife </strong>is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank">Canary Islands</a>. It is also the most populated island of <strong>Spain</strong>, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the <strong>Canary Islands</strong>.&nbsp;The archipelago's beaches, climate and important natural attractions, make it a major tourist destination with over 12 million visitors per year.
</p>
<br />
<img src="https://demos.telerik.com/kendo-ui/content/web/editor/tenerife.png" style="float: right;" alt="" width="350" height="206" />
<p><span style="font-family:Verdana, Geneva, sans-serif;font-size:medium;">
<strong>Trip Highlights in Tenerife</strong></span></p><span style="white-space:pre;"></span>
<ul>
<li>
<strong style="color: rgb(0,80,5);">Trip to Loro Parque </strong> <br /> Out top tip is to visit the famous <em>Loro Parque</em> or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz on Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species.
<br />
<br />
</li>
<li>
<strong><span style="color: rgb(46,125,50);">Whale and Dolphin Watching Tour&nbsp;<br /></span></strong> Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
<br />
<br />
</li>
<li>
<strong><span style="color: rgb(96,173,94);">Teide National Park Stargazing</span></strong><br />Last, but not least you can take a stargaze trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
<br />
</li>
</ul>
</textarea>
<script>
$(document).ready(function () {
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
//var base64 = getBase64Image(document.getElementById("imageid"));
var imageUrl;
var img;
var dialog = $("#dialog").kendoWindow({
width:1000,
height:1000,
visible:false,
modal:true,
open:function(){
var imgEditor = $("#imageeditor").data("kendoImageEditor");
toDataURL(imageUrl, function(dataUrl){
$("#imageeditor").data("kendoImageEditor").drawImage(imageUrl).done(function (image) {
$(image).attr("src", dataUrl);
$("#imageeditor").data("kendoImageEditor").drawCanvas(image);
})
})
}
}).data("kendoWindow");
$("#imageeditor").kendoImageEditor();
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor();
var editor = $("#editor").data("kendoEditor");
$("#menu").kendoContextMenu({
target:$(editor.body),
filter: "img",
animation: {
open: { effects: "fadeIn" },
duration: 500
},
open:function(e){
img = e.target;
imageUrl = $(e.target).attr("src");
},
select: function(e) {
$("#dialog").data("kendoWindow").center().open();
}
});
$(".k-primary").click(function(){
var imageEditor = $("#imageeditor").data("kendoImageEditor");
var image = imageEditor.getCurrentImage();
var imageBase64 = $(image).attr("src");
dialog.close();
$(img).attr("src", imageBase64);
})
});
</script>
<style>
.window-footer{
position: absolute;
bottom: 0;
display: block;
width: 95%;
margin-top: 150px;
padding: 19px 0 20px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
</style>
</div>
</div>