Does it support attachting base64 image ?

[quroom]

Currently I am using quilljs. Not only It's more heavy than pell but also it has critical problem that scrolling top while pasting long text So I am considering to use pell editor, if I can use base64 image in this editor.

[jaredreich]

It does not, but feel free to submit a PR!

[quroom]

Thanks for answer. Nowadays I am little bit busy because of my project. So I will try it ASAP :) I am happy that you asked me to send PR :) I hope that I will have time to send PR soon.

Have a nice day! @jaredreich

[Ninja4Code]

I am someone who got fed up with quill as well. Very heavy and I always experienced errors when trying to bundle it. I will take a stab at the base64 image because I think it's a "gotta have" these days.

UPDATE: I was able to successfully convert the image action to retrieving a file via the File Explorer using FileReader. I was then able to convert to a base64 image and insert into the document! There's no ability yet to resize the image or to restrict image size, which might be a good idea. I'll do a pull request shortly.

[jaredreich]

Nice work folks. The problem here is adding functionality like this to the core package would be just bloat.

That being said, it's a great idea for a custom-written action.

Rather than a PR, it's a good idea to post what you've written for your custom action here, and I can add it to some sort of "custom actions list" for people to reference in the future.

[Ninja4Code]

It's not bloat. Takes all of about 5 lines of code.

From: Jared Reich @.> Sent: Monday, November 22, 2021 12:18 PM To: jaredreich/pell @.> Cc: Charles Owen @.>; Comment @.> Subject: Re: [jaredreich/pell] Does it support attachting base64 image ? (#214)

Nice work folks. The problem here is adding functionality like this to the core package would be just bloat.

That being said, it's a great idea for a custom-written action.

Rather than a PR, it's a good idea to post what you've written for your custom action here, and I can add it to some sort of "custom actions list" for people to reference in the future.

You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjaredreich%2Fpell%2Fissues%2F214%23issuecomment-975747509&data=04%7C01%7C%7Cac53b9ccd5654457086308d9addc0ee8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637731982918819158%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=fjXH0R3fjhozsxUo02qh7cwuXPYAm5M1zyE90rNtBlM%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACYCAVQKS3GPOGCZJAMCU73UNJ3NDANCNFSM44MUOOVA&data=04%7C01%7C%7Cac53b9ccd5654457086308d9addc0ee8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637731982918829142%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=Nobc8G%2Fg6AaHEvuhHJ2qig3yVimr8JiXxOn2ACxWLro%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7C%7Cac53b9ccd5654457086308d9addc0ee8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637731982918839135%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=OZCP00Lg%2FKZg8lqoWzBNQ102hXnm5Z4cVv521ByrPko%3D&reserved=0 or Androidhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7C%7Cac53b9ccd5654457086308d9addc0ee8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637731982918839135%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=hIvGUdyEcHPLkbP00LGnFJaCmL%2FpS6Uy3RjmGwO7Gz4%3D&reserved=0.

[josiaho]

Here's a super basic custom action:

{
    name: 'image',
    result: function () {
        var f = document.createElement('input');
        f.type = 'file';
        f.setAttribute('accept', 'image/*');
        f.click();
        f.onchange = function (e) {
            var r = new FileReader();
            r.readAsDataURL(e.target.files[0]);
            r.onload = function () {
                document.execCommand('insertImage', 0, r.result)
            }
        }
    }
}

I'm sure there's a better way to do this, but it seems to work on a desktop at least. You could pair this with a canvas image editor such as cropper to perform cropping/resizing/etc before embedding or uploading to a server.

[Ninja4Code]

Thanks, I created something very similar months ago and it's working well. I love this rich text editor.

---

From: Josiah Oslund @.> Sent: Wednesday, July 13, 2022 10:38 AM To: jaredreich/pell @.> Cc: Charles Owen @.>; Comment @.> Subject: Re: [jaredreich/pell] Does it support attachting base64 image ? (#214)

Here's a super basic custom action:

{ name: 'image', result: function () { var f = document.createElement('input'); f.type = 'file'; f.setAttribute('accept', 'image/*'); f.click(); f.onchange = function (e) { var r = new FileReader(); r.readAsDataURL(e.target.files[0]); r.onload = function () { document.execCommand('insertImage', 0, r.result) } } } }

I'm sure there's a better way to do this, but it seems to work on a desktop at least. You could pair this with a canvas image editor to perform cropping/resizing/etc before embedding.

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjaredreich%2Fpell%2Fissues%2F214%23issuecomment-1183309124&data=05%7C01%7C%7Cb808bcd106e2443b09b608da64dd5f9f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637933199428365303%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=RZW80XSj90scrvca5xg7hLpWJHzGL7OhX6xahx8R8NI%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FACYCAVT4KB5XJXRGBEQCVDLVT3IG3ANCNFSM44MUOOVA&data=05%7C01%7C%7Cb808bcd106e2443b09b608da64dd5f9f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637933199428365303%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fqVaR5cVNVobso6Y%2FRYKiHrJHR6xstiUPg5iO%2F%2FT3Bw%3D&reserved=0. You are receiving this because you commented.Message ID: @.***>