GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.94k stars 393 forks source link

Add image pasting ability #579

Open deejayy opened 1 year ago

deejayy commented 1 year ago

I don't know CoffeScript at all, so a thorough review is required, the changes here are reversed from a proven JS implementation I made. If you like it, please adjust accordingly.

Example code for handling the paste event:

  const uploader = function (ev) {
    var formData = new FormData();
    formData.append("image", ev.detail().file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload");
    xhr.onload = function () {
      if (xhr.status == 200) {
        const response = JSON.parse(xhr.responseText) || {};
        if (ev.detail().element && response.url) {
          editor.pasteHTML(ev.detail().element, `<p><img src="${response.url}"/></p>`, true);
        }
      } else {
        console.log("Nope");
      }
    };

    xhr.send(formData);
  };

  editor.addEventListener("imagepaste", uploader);

Or, you can close it, no hard feelings :)