How can I paste an image from the clipboard to Kendo UI Editor?

Question

I am using the Kendo UI Editor widget. I want to paste the content of the print screen. How can I do that?

Regards,

Naidu

score 5 · Accepted Answer · edited May 23 '17 at 11:58

5

Here is a related question. Seems to work in latest Chrome and Firefox. And can be plugged in the Kendo Editor via some code:

var editor = $("#editor").data("kendoEditor");

$(editor.document).on("paste", function(e) {
  var clipboard = e.originalEvent.clipboardData;

  if (clipboard && clipboard.items) {
      var screenshot = clipboard.items[0];

      if (screenshot.kind == "file") {
          var blob = screenshot.getAsFile();

          var reader = new FileReader();

          reader.onload = function(event){
            var html = kendo.format('<img src="{0}"/>', event.target.result);

            editor.paste(html);
          };

          reader.readAsDataURL(blob);
      }
  }
});

And here is a live demo: http://jsbin.com/utapal/1/edit

edited May 23 '17 at 11:58

Community

1
1

answered Dec 04 '12 at 10:09

Atanas Korchev

30,562
8
59
93

Thank you. One more question how can i save the pasted value in to database. I mean i need to convert those in to stream and save in to database – Jonathan Dec 04 '12 at 13:34
You need to extract the value of the "src" attribute of the image. It contains the image data in base64 format. More info about data URI can be found here: http://en.wikipedia.org/wiki/Data_URI_scheme – Atanas Korchev Dec 04 '12 at 15:44
How can i do that in ie and safari -- Thank you – Jonathan Dec 05 '12 at 06:50
You can't in IE. It does not support the standard. Safari should work. – Atanas Korchev Dec 05 '12 at 15:15
Is there any alternative to do in ie – Jonathan Dec 06 '12 at 04:03
No. As I said IE doesn't support that. – Atanas Korchev Dec 06 '12 at 08:05
Not working in firefox, while i am trying to save the image i am getting half of the image (right part of the image is not displaying) – Arjun Nov 05 '15 at 14:53
The above jsbin link is working for me in IE11. – Matthew Nichols May 02 '18 at 19:39

How can I paste an image from the clipboard to Kendo UI Editor?

1 Answers1